npm包easy-react-bulma使用教程

前言：easy-react-bulma 是基于 Bulma CSS框架二次封装，实现了一些常用的组件，同时提供了一套React组件库。本文主要介绍使用npm包 easy-react-bulma 的一些基本方法，及其各种组件的使用方法。

安装

通过npm安装 easy-react-bulma :

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

--save 参数将会把该npm包添加到本地的package.json文件中。

快速使用

在安装完成后，在项目中使用 import 进行引用：

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

然后就可以进行使用：

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

组件列表

当前 easy-react-bulma 包包含了以下组件：

组件 说明
AlertBox 警告提示框组件
Badge 标记组件，用于展示文本或信息的状态
Breadcrumb 面包屑导航组件
Button 按钮组件
Card 卡片组件
Dialog 对话框组件
Icon 图标组件，可展示不同类别、类型的图标
Pagination 分页组件
Select 下拉列表组件
Switch 开关组件，滑块切换控制状态
Table 表格组件
Tabs 选项卡组件

使用方法示例

AlertBox

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

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

type 属性支持以下几种类型：

  • primary：主要提示
  • link：提示为链接
  • info：普通提示
  • success：成功提示
  • warning：警告提示
  • danger：危险提示

Badge

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

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

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

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

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

Select

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

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

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

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

注意，Select组件接收的 data 是一个包含对象键值对的对象。

Switch

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

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

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

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

Table

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

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

Tabs

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

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

总结

本文主要介绍了 easy-react-bulma 组件库的基本使用方法、各种组件的使用方法，并附带了示例代码。希望能够对前端工程师在项目开发中有所帮助。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600555bd81e8991b448d2d76

阅读全文

猜你喜欢

  • npm 包 css-resets 使用教程

    前言 随着前端技术的不断发展，我们在开发网页的时候需要使用更多的外部样式库和框架，但也经常会遇到样式之间的冲突和兼容问题。为了解决这个问题，我们可以使用 css-resets 这个 npm 包，它可以...

    2 年前
  • npm 包 mt-components 使用教程

    前言 在前端开发中，我们经常需要使用一些基础组件和工具，比如弹窗、表单验证等。npm 是一个非常常见的工具包管理工具，而 mt-components 则是一个基于 npm 的组件库，提供了一系列常用的...

    2 年前
  • NPM包 Monsieur 使用教程

    Monsieur 是一个针对前端开发者的工具，它可以将您的设计稿转化为交互式的HTML和CSS代码。通过Monsieur，您可以方便地将您的设计稿快速转化成网页原型并进行调试。

    2 年前
  • npm 包 loading-spinner-spin 使用教程

    1. 简介 loading-spinner-spin 是一个基于 CSS 和 SVG 的动画加载器，它通过创建旋转的小球动画来实现加载效果。该包可以轻松集成到前端项目中，方便地用于显示加载过程。

    2 年前
  • npm 包 amazeui-react-cdrail 使用教程

    前言 在前端开发中，我们经常需要在项目中引入第三方库以实现一些特定的功能或样式。amazeui-react-cdrail 就是一种非常优秀的基于 React 库的 UI 组件库，其旨在为开发者提供高品...

    2 年前
  • npm 包 robel-npm-publish 使用教程

    前言 在开发前端项目时，使用第三方库和框架已经成为一种很普遍的选择。而 npm 是前端界最常用的包管理工具，也是开发者们最喜欢的方式之一。 在自己开发的项目中，我们也有可能需要将自己写的一些代码打包成...

    2 年前
  • npm 包 generator-system-core 使用教程

    简介 npm 是一个 node.js 的包管理器，有很多优秀的包可以方便开发者使用，而 generator-system-core 就是其中一个不错的 npm 包。

    2 年前
  • npm 包 test01-mwmic 使用教程

    简介 test01-mwmic 是一个前端开发工具包，可以用于快速实现一些常见的网页布局和交互效果。它可以帮助前端开发人员快速搭建网站，提高开发效率。 安装 在使用 test01-mwmic 之前，需...

    2 年前
  • npm 包 push-notification-test 使用教程

    介绍 在现代互联网应用中，推送通知功能已经成为了必不可少的一部分。push-notification-test 是一个 Node.js 库，提供了一个快速、简单、并且可靠的方法来创建和发送推送通知。

    2 年前
  • npm 包 bs-ppx_deriving_protobuf 使用教程

    在前端开发中，我们通常会遇到需要进行数据序列化和反序列化的情况。而对于大规模的数据模型，手动进行序列化和反序列化工作非常繁琐，并且容易出错。此时我们可以使用 bs-ppx_deriving_proto...

    2 年前
  • npm 包 jquery-capitalize 使用教程

    在前端开发中，经常会出现需要对文本进行首字母大写、全文大写等操作的需求。而 jquery-capitalize 就是一个方便快捷地处理文本大小写的 npm 包。本篇文章将介绍 jquery-capit...

    2 年前
  • npm 包 object-optional-chaining 使用教程

    前言 在前端开发过程中，我们经常需要访问深层嵌套的 JavaScript 对象或数组中的属性或方法。在访问这些嵌套的属性或方法时，通常会使用类似obj.prop1.prop2.method()这样的语...

    2 年前
  • npm 包 test-result-normalizer 使用教程

    介绍 在前端开发过程中，测试已经成为一个必不可少的环节。而测试结果的格式各式各样，往往需要花费很多时间和精力来进行处理与分析。于是，npm 包 test-result-normalizer 就应运而生...

    2 年前
  • npm 包 akyuu-schedule 使用教程

    在前端开发中，我们经常需要使用定时任务来完成一些重复性的工作，比如更新数据、定时检查异常等等。而 akyuu-schedule 就是一个非常方便的 npm 包，可以帮助我们轻松地实现这些功能。

    2 年前
  • npm 包 fc-react-tooltip 使用教程

    在前端开发中，tooltip 组件可以为用户提供更加友好的交互体验。fc-react-tooltip 是一个基于 React 的 tooltip 组件，使用简单且效果美观，今天我们就来进行学习和使用。

    2 年前
  • npm 包 slick-browserify-js 使用教程

    简介 slick-browserify-js 是一个基于 JavaScript 的轻量级的滑动轮播库，其主要是通过 Browserify 转译的 Slick。它可以方便地用于前端页面的开发，提供了丰富...

    2 年前
  • npm 包 aes-cmac-prf-128 使用教程

    前言 在前端开发中，我们时常需要处理加密相关的工作。为了减少重复造轮子的情况发生，有时我们需要借助现成的 npm 包。在本文中，我们将介绍一款名为 aes-cmac-prf-128 的 npm 包，它...

    2 年前
  • npm 包 cordova-plugin-mufucaca 使用教程

    简介 cordova-plugin-mufucaca 是一个 Cordova 插件，用于在移动应用中集成 Mufucaca（慕甲卡卡）SDK，以实现视频通话、语音通话等功能。

    2 年前
  • 使用 eslint-config-ryugaku npm 包的教程

    eslint-config-ryugaku 是一个基于 ESLint 的配置包，它遵循了龍學風格指南。它是龍學技術大學的前端課程用於Javascript代碼檢查的一個标准配置，通过使用它，可以帮助开发...

    2 年前
  • npm 包 hubot-oac 使用教程

    介绍 hubot-oac 是一款 Hubot 插件，使用 Office 365 添加日历事项和查看当前组织成员的日历。本文将介绍如何使用该插件。 安装 先安装 Node.js 和 npm。

    2 年前

相关推荐

    暂无文章