前端开发需要经常使用 UI 库，而 @chakra-ui/core 就是一款非常好用的 UI 库，它提供了许多常用的 UI 组件和自定义主题的能力，随手都能打造出漂亮的页面。
在这篇文章中，我们将会学习如何使用 npm 包 @chakra-ui/core 来开发基于 React 的 web 应用程序。我们会从最基础的开始，逐步深入介绍其API，并给出详细的示例代码。阅读完本教程后，您将学会如何快速上手该库，并轻松实现 UI 设计。
安装
首先，我们需要使用 npm 来安装该包：
npm install @chakra-ui/core
然后，我们需要在项目的入口文件中引入并注册该库的全局主题文件:
-- -------------------- ---- -------
------ - -------------- -------- - ---- -----------------
-------- ----- -
------ -
---------------
--------- --
-- -------
----------------
-
-现在，我们可以开始使用 @chakra-ui/core 中的组件了。
基础组件
@chakra-ui/core 提供了许多可用的基础组件。您可以使用这些构建块来构建更复杂的 UI。
让我们从最基础的组件开始:
-- -------------------- ---- -------
------ - ---- ---- - ---- ------------------
-------- ----- -
------ -
---- ------------- ------------
----- ------------- ---------------
--------------------
-------
------
-
-上面的代码演示了如何使用 Box 和 Text 来创建简单的消息组件。Box 组件是一个带有预定义样式的矩形块。Text 组件是用于呈现文本的标准组件。
@chakra-ui/core 还提供了一些常用的组件如 Button，Form，Input,等等。
-- -------------------- ---- -------
------ - ------- ------ ----- - ---- -----------------
-------- ----- -
------ -
------ ------------
------ ---------------- --
------ ---------------- --------------- --
------- -------------------------------
--------
-
-上面的代码演示了如何创建一个简单的登录表单。Stack 组件使我们能够垂直堆叠组件。Input 组件是一个可编辑单行文本框，Button 组件是一个可点击的按钮。
Box 属性
Box 组件接受多个属性，每个属性都有各自的默认值。
- width/height：定义组件的宽度和高度。
- bg/color：控制背景和前景颜色。
- padding/margin：控制内边距和外边距。
- borderRadius：控制圆角和边框。
- border：控制组件的边框。
- shadow：添加阴影效果。
下面是一些常用的 Box 属性的代码演示：
-- -------------------- ---- ------- ---- ------------- ------------- ------------- ------- ----- ------------ -------------- - -- ----- ------
ThemeProvider 属性
ThemeProvider 是 @chakra-ui/core 包的核心组件之一。它允许我们定义全局主题并使其在全站共享。
在实际项目中，您可能需要根据自己的需求进行自定义。您可以将默认主题覆盖为您自己的主题。
-- -------------------- ---- -------
------ - -------------- ------ -------- - ---- -----------------
----- ----------- - -
---------
------- -
----------------
-------- -
--- ----------
-- ----------
--
--
-- ---------------
-
-------- ----- -
------ -
-------------- --------------------
--------- --
-- -------
----------------
-
-自定义主题
@chakra-ui/core 以自定义主题闻名，允许您快速轻松地更改您的站点样式，而无需逐个更改组件。
让我们看看如何实现自定义主题：
-- -------------------- ---- -------
------ - -------------- ------ --------- ------- - ---- -----------------
----- ----------- - -
---------
------- -
----------------
-------- -
--- ----------
---- ----------
---- ----------
---- ----------
---- ----------
---- ----------
---- ----------
---- ----------
---- ----------
---- ----------
--
--
------ -
---------------
----- ---------- ------------
-------- -------------- ------------
--
------------ -
---------------------
------- ----
----- ----
--
-
-------- ----- -
------ -
-------------- --------------------
--------- --
-------- ------- -------------- -------
-------
----------
----------------
-
-上面的代码演示了如何更改主题颜色和使用自定义字体。我们将基础颜色扩展到 Shade 900。我们还添加了针对不同权重字体的定义，从而使字体具有更丰富的重量。
总结
这里是@ chakra-ui/core的简单教程！我们希望这篇文章给您带来了有关如何开始使用该库的指导和灵感。有了这些基础，您可以快速轻松地构建出漂亮的 web 应用程序。
当然，这仅是冰山一角，您可以深入了解该库的API和功能，从而使您的应用程序功能更加强大和美观。
示例代码及其它组件属性资料的详见官网： https://chakra-ui.com/docs/getting-started 。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/150971