简介
maybank 是一款基于 React 的前端组件库，旨在提供一系列常用的 UI 组件和样式。可以通过 npm 安装使用。
安装
可以通过 npm 直接安装 maybank：
npm install maybank
引入
可以按需引入需要的组件，以 Button 组件为例：
-- -------------------- ---- -------
------ - ------ - ---- ---------
-------- ----- -
------ -
---- ----------------
-------------------
------
--
-
------ ------- ----组件列表
maybank 提供了一系列常用的 UI 组件：
- Button 按钮
- Input 输入框
- Select 选择器
- Checkbox 多选框
- Radio 单选框
- Switch 开关
- Progress 进度条
- Loading 加载中
- Modal 弹窗
- Message 消息提示
使用示例
Button 按钮
-- -------------------- ---- -------
------ - ------ - ---- ---------
-------- ----- -
------ -
---- ----------------
---------------------
------- ----------------------------
------- ---------------------------
------
--
-
------ ------- ----Input 输入框
-- -------------------- ---- -------
------ - ----- - ---- ---------
-------- ----- -
------ -
---- ----------------
------ ----------------- --
------ ------------------ --
------
--
-
------ ------- ----Select 选择器
-- -------------------- ---- -------
------ - ------ - ---- ---------
----- - ------ - - -------
-------- ------------------- -
--------------------- -----------
-
-------- ----- -
------ -
---- ----------------
------- ------------------- -------- ------ --- -- ------------------------
------- --------------------------
------- --------------------------
------- ---------------- ---------
--------
---------
------- ----------------------------------
---------
------
--
-
------ ------- ----Checkbox 多选框
-- -------------------- ---- -------
------ - -------- - ---- ---------
-------- ----------------------- -
-------------------- - -- ---------------
-
-------- ----- -
------ -
---- ----------------
--------------- --------------------
--------- ----------------------
--------- ----------------------
--------- ----------------------
--------- ----------------------
-----------------
------
--
-
------ ------- ----Radio 单选框
-- -------------------- ---- -------
------ - ----- - ---- ---------
-------- ----------- -
------------------ ----------------------------
-
-------- ----- -
------ -
---- ----------------
------------ --------------------
------ ---------------- ---------
------ ---------------- ---------
------ ---------------- ---------
------ ---------------- ---------
--------------
------
--
-
------ ------- ----Switch 开关
-- -------------------- ---- -------
------ - ------ - ---- ---------
-------- ----------------- -
------------------- -- -------------
-
-------- ----- -
------ -
---- ----------------
------- -------------- ------------------- --
------
--
-
------ ------- ----Progress 进度条
-- -------------------- ---- -------
------ - -------- - ---- ---------
-------- ----- -
------ -
---- ----------------
--------- ------------ --
--------- ------------ --------------- --
--------- ------------ ------------------ --
--------- ------------- --
------
--
-
------ ------- ----Loading 加载中
-- -------------------- ---- -------
------ - ------- ---- - ---- ---------
-------- ----- -
----- --------- ----------- - ----------------
----- ----------- - -- -- -
-----------------
------------- -- -
------------------
-- ------
-
------ -
---- ----------------
------- -------------- -----------------------------------
----- ------------------ --
------
--
-
------ ------- ----Modal 弹窗
-- -------------------- ---- -------
------ - -------- - ---- --------
------ - ------- ----- - ---- ---------
-------- ----- -
----- --------- ----------- - ----------------
----- -------- - -- -- -
------------------
-
----- ------------ - -- -- -
------------------
-
------ -
---- ----------------
------- -------------- ----------- -- ------------------
---- -----
---------
------
------------ ------
-----------------
---------------
-----------------------
-
------- ---------------
--------
------
--
-
------ ------- ----Message 消息提示
-- -------------------- ---- -------
------ - ------- - ---- ---------
-------- ----- -
----- ----------- - -- -- -
--------------------- -- - ------- ----------
-
------ -
---- ----------------
------- -------------- -----------------------------------
------
--
-
------ ------- ----总结
maybank 是一款非常实用的前端组件库，提供了丰富的 UI 组件和样式，可以大大提高前端开发效率。通过本文的介绍和示例，相信读者已经对 maybank 有了更加深入的了解和掌握。建议读者在实际开发中使用 maybank，以提高开发效率和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065b42c6eb7e50355dbd5d