npm 包 gatsby-ui 使用教程

在现代化的 Web 开发中，前端框架和 UI 库的重要性不言而喻。对于 React 生态圈的开发者而言，Gatsby.js 和 gatsby-ui 构成了整个前端开发工具链的核心。本文将向大家介绍一下 gatsby-ui 的基本使用方法，让你轻松地搭建一个优美的 UI 界面。

安装 gatsby-ui

在开始之前，你需要先安装 gatsby-ui 包。在终端窗口中键入以下命令：

npm install gatsby-plugin-styletron gatsby-plugin-styletron-react

其中，gatsby-plugin-styletron 是 gatsby-ui 依赖模块。gatsby-plugin-styletron-react 是与 React 相关的依赖模块。这两个模块安装完成后，你就可以开始使用 gatsby-ui 了。

如何使用 gatsby-ui

在你的 React 项目中，添加 gatsby-plugin-styletron 和 gatsby-plugin-styletron-react 的插件。这两个插件可以帮助你在 React 中集成 gatsby-ui。

// gatsby-config.js

module.exports = {
  plugins: [
    `gatsby-plugin-styletron`,
    `gatsby-plugin-styletron-react`,
  ],
};

在项目的入口文件中，导入并启用 gatsby-ui。

-- -------------------- ---- -------
-- ------------------

------ ----- ---- --------
------ - -------- -- ----------------- - ---- ------------------
------ - --------- - ---- ---------------------
------ - ------ - ---- ------------

------ ------- -- -- -
  ------------------ ------------------
    ------------- ------------
  --------------------
--

这是一个简单的按钮示例，它使用了 gatsby-ui 中的 Button 组件。由于 StyletronProvider 是在项目中的样式供应器，你需要正确地使用它来渲染整个样式。

最后，在项目中执行以下命令：

gatsby develop

运行成功后访问 localhost 即可看到你的 gatsby-ui 界面。

gatsby-ui 示例代码

Gatsby-ui 打包了很多对应的 React 组件，包括：

Avatar 头像

使用方法：

import { Avatar } from 'gatsby-ui';

<Avatar
  name="Alex"
  size="80px"
  src="https://cdn.example.com/path/to/avatar.jpg"
/>;

Badge 标签

使用方法：

import { Badge } from 'gatsby-ui';

<Badge>NEW!</Badge>;

Button 按钮

使用方法：

import { Button } from 'gatsby-ui';

<Button>Click me!</Button>;

Card 卡片

使用方法：

-- -------------------- ---- -------
------ - ---- - ---- ------------

------
  ---------------- ------------------
  -----------
    ------- -----------
  ------------
  ----------------- --------------------
--------

Checkbox 复选框

使用方法：

import { Checkbox } from 'gatsby-ui';

<Checkbox>Checkbox Label</Checkbox>;

Heading 标题

使用方法：

import { Heading } from 'gatsby-ui';

<Heading level={1}>My Title</Heading>;

Input 输入框

使用方法：

import { Input } from 'gatsby-ui';

<Input />;

Link 链接

使用方法：

import { Link } from 'gatsby-ui';

<Link to="/example">Link Label</Link>;

Radio 单选框

使用方法：

import { Radio } from 'gatsby-ui';

<Radio>Radio Label</Radio>;

Select 选择器

使用方法：

-- -------------------- ---- -------
------ - ------ - ---- ------------

-------
  ----------
    - ------ ---------- ------ ------- -- --
    - ------ ---------- ------ ------- -- --
    - ------ ---------- ------ ------- -- -
  --
---

Tag 标签

使用方法：

import { Tag } from 'gatsby-ui';

<Tag>Tag Label</Tag>;

总结

本文我们向大家介绍了 gatsby-ui 框架的基本使用方法，包括安装 gatsby-ui 包、如何使用 gatsby-ui 以及各组件使用方法等。希望本文能够对开发者有所帮助，让你更好的使用 gatsby-ui 快速搭建出优美的 UI 界面。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/80032