简介
mithril-hobbit 是一个基于 mithril 的前端组件库，旨在提供常用组件的封装和样式定义等，并支持可自定义主题。
安装
使用 npm 安装：
--- ------- -------------- ------
使用
在代码中引入 mithril 和 mithril-hobbit：
------ - ---- ---------- ------ - ------ - ---- ----------------- ---------------------- -------------- -----------
上面的代码会在页面上渲染一个带有 label 文本为 hello 的按钮。
API
以下是 mithril-hobbit 提供的常用组件及其 API。
Button
------ - ------ - ---- -----------------
props：
- label: string，按钮文本
- onClick: function，按钮点击事件
Input
------ - ----- - ---- -----------------
props：
- label: string，输入框前的标签文本
- value: string，输入框的值
- onChange: function，输入框值改变事件
Checkbox
------ - -------- - ---- -----------------
props：
- label: string，复选框前的标签文本
- value: boolean，复选框的选中状态
- onChange: function，复选框状态改变事件
Radio
------ - ------ ---------- - ---- -----------------
props：
- label: string，单选框前的标签文本
- value: string，单选框的值
- onChange: function，单选框值改变事件
RadioGroup：
- value: string，当前选中项的值，受控组件需要
- onChange: function，单选框值改变事件
- options: array，单选框选项的值和文本，形如
[ {label: '文本1', value: '值1'}, {label: '文本2', value: '值2'} ]
Select
------ - ------ - ---- -----------------
props：
- label: string，下拉框前的标签文本
- value: string，下拉框选中项的值
- onChange: function，下拉框选中项改变事件
- options: array，下拉框选项的值和文本，形如
[ {label: '文本1', value: '值1'}, {label: '文本2', value: '值2'} ]
主题
mithril-hobbit 支持自定义主题，可以通过修改变量达到自定义样式的效果。
常用变量
下面是一些常用的样式变量，你可以将它们定义在 Less 或 Sass 文件中，以达到自定义主题的目的：
--------------- -------- -- --- ------------ ----- -- ---- ----------- ----- -- -- --------------- ---- -- -- ------------------ ----- -- ----- ------------------------- ----- -- --------
示例代码
------ - ---- ----------
------ - ------- ------ --------- ------ ----------- ------ - ---- -----------------
------ ----------------------
----- --- - -
----- -
----------- ---
-------------- ------
----------- ---
------------ --
--
------ -
----------------- ------- -- -----
-------------- ------
--
----- ---------- -
------ --------- -
--------- - ------ ----- -------- -- -- -------------- ---
---------- -
--------------- -
--------------------- -------
----------------------- -------- - ------ --- ------ --------------------- --------- --- -- -------------------- - -------------- ---
---
--------------- -
--------------------- -------
----------------------- ----------- - ------ ------ ------ ------------------------ --------- ------- -- ----------------------- - ----- ---
---
--------------- -
--------------------- -------
----------------------- -
-------- - ------ ------- ------ ---- --------- ------- -- -------------------- - ------ -------- -------------------- --- --- ---
-------- - ------ ------- ------ ---- --------- ------- -- -------------------- - ------ -------- -------------------- --- --- ---
--
---
--------------- -
--------------------- -------
----------------------- --------- - ------ --- ------ ---------------------- --------- ------- -- --------------------- - ------ -------- - ------- ------ ------ ----- ------- ------ ------ ---- - ---
---
--
---
-
--
---------------------- -----结语
以上是 mithril-hobbit 的使用教程，希望对大家有帮助。如果你在使用过程中遇到问题，可以参考官方文档或提交 issue，我们会及时处理。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60065f71238a385564ab6788