前言：easy-react-bulma 是基于 Bulma CSS框架二次封装，实现了一些常用的组件，同时提供了一套React组件库。本文主要介绍使用npm包 easy-react-bulma 的一些基本方法，及其各种组件的使用方法。
安装
通过npm安装 easy-react-bulma :
npm install easy-react-bulma --save
--save 参数将会把该npm包添加到本地的package.json文件中。
快速使用
在安装完成后，在项目中使用 import 进行引用：
import { Button } from 'easy-react-bulma';然后就可以进行使用：
function App() {
return (
<div className="App">
<Button>Click Me!</Button>
</div>
);
}组件列表
当前 easy-react-bulma 包包含了以下组件：
| 组件 | 说明 |
|---|---|
| AlertBox | 警告提示框组件 |
| Badge | 标记组件，用于展示文本或信息的状态 |
| Breadcrumb | 面包屑导航组件 |
| Button | 按钮组件 |
| Card | 卡片组件 |
| Dialog | 对话框组件 |
| Icon | 图标组件，可展示不同类别、类型的图标 |
| Pagination | 分页组件 |
| Select | 下拉列表组件 |
| Switch | 开关组件，滑块切换控制状态 |
| Table | 表格组件 |
| Tabs | 选项卡组件 |
使用方法示例
AlertBox
import React from 'react';
import { AlertBox } from 'easy-react-bulma';
function App() {
return (
<AlertBox type="danger" message="This is a dangerous message." />
);
}type 属性支持以下几种类型：
primary：主要提示link：提示为链接info：普通提示success：成功提示warning：警告提示danger：危险提示
Badge
import React from 'react';
import { Badge } from 'easy-react-bulma';
function App() {
return (
<Badge type="success" text="Online" />
);
}type 属性支持以下几种类型：
primary：主色link：链接颜色info：信息提示色success：成功提示色warning：警告提示色danger：危险提示色
Breadcrumb
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------- - ---- -------------------
-------- ----- -
------ -
------------
----
------ ----------------------
------ -----------------------
--------------
-----
-------------
--
-Button
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- -------------------
-------- ----- -
------ -
--
------------------------
------- -------------------------------
------- -------------------------
------- -------------------------
------- -------------------------------
------- -------------------------------
------- ------------- ------------------------
---
--
-.BUTTON:hover { background-color: transparent; color: whitesmoke; border: 1.3px solid silver; }
Card
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- - ---- -------------------
-------- ----- -
------ -
-----
-------------
-------------------
-------------- ----- ----- --- ----- ----------- ---------- ----- -- --- -------- ----- --- ---- --------- ------ -- --- ----- -- ----- ------- --------- ---- --- ---- ------- --------- ------ -- --------- ---- ----- ---- ----- ------ --- --- -------- ------- ---- -------- ------- --------- -- ---- ------ ----- - ------ --- ---------- --- ----- ---- ---- -------- ------------ --- -- ----- ----- ------- ---- ----- -- -------- ----- ------- ---- -- --------- ----- --- ------- -------- ----------- --------- ------ --- ----- ------------ -----------
---------------------------------------------------------
------------------ ----
--
--
-Dialog
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ------- ------ - ---- -------------------
-------- ----- -
----- -------- ---------- - ----------------
-------- ------------ -
----------------
-
-------- ------------- -
-----------------
-
------ -
--
------- ------------------------- ---------------
------- ---------------
----------- -- - -------
------------------ ------- ------
----------------------
-----------------------
--
---
--
-Icon
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- - ---- -------------------
-------- ----- -
------ -
--
----- ----------- --------- --
----- ----------- --------- --------------- --
----- --------------- --------- --------------- --
---
--
-icon 属性可选择 Bulma官方图标名称。
Pagination
import React from 'react';
import { Pagination } from 'easy-react-bulma';
function App() {
return (
<Pagination totalItems={20} itemsPerPage={5} activePage={2} />
);
}Select
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ------ - ---- -------------------
-------- ----- -
----- ------- --------- - ------------------
-------- ------------------- -
-----------------------------
-
------ -
-------
-----------------------
-------------
--------------- -------- --------- --------- --------- ----------
--
--
-注意，Select组件接收的 data 是一个包含对象键值对的对象。
Switch
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ------ - ---- -------------------
-------- ----- -
----- ----------- ------------- - ----------------
-------- ------------------- -
-----------------------------------
-
------ -
------- ----------------------- ------------------- --
--
-Table
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- -------------------
-------- ----- -
------ -
------
------
-
-------- ------- ------ ----
-------- ------- ------ ----
-------- ------- ------ ----
-------- ------ ------ ----
-------- ------- ------ ----
-
-
--------
-
------- ------- -------- --------
------- ------ -------- -------
-
-
------------------ ----
------------
-------------
------------
--
--
-Tabs
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- -------- - ---- -------------------
-------- ----- -
------ -
--
------
----
------ ---------------- ----------
------ ---------------- ----------
------ ---------------- ----------
-----
--------- -------------- -- --- ------- -- --- ------------
--------- -------------- -- --- ------- -- --- ------------
--------- -------------- -- --- ------- -- --- ------------
-------
---
--
-总结
本文主要介绍了 easy-react-bulma 组件库的基本使用方法、各种组件的使用方法，并附带了示例代码。希望能够对前端工程师在项目开发中有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600555bd81e8991b448d2d76