简介
fury.mithril 是一个基于 mithril.js 的 UI 组件库，提供了丰富的组件和功能。
安装
在命令行中执行以下命令安装 fury.mithril：
npm install fury.mithril
使用
- 在 HTML 中引入 mithril.js 和 fury.mithril：
<script src="https://unpkg.com/mithril/mithril.js"></script> <script src="https://unpkg.com/fury.mithril/fury.mithril.js"></script>
- 在 JavaScript 中使用 fury.mithril 组件：
m.render(document.body, m(fury.component.Button, { onclick: function() { alert('Clicked!'); } }, 'Click me!'));组件
Button
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| onclick | Function | 点击时触发的函数 | |
| disabled | Boolean | false | 是否禁用按钮 |
| type | String | 'button' | 按钮类型，可选值为 'button'、'submit' 和 'reset'。 |
| size | String | 'normal' | 按钮大小，可选值为 'normal'、'small'、'large' 和 'xlarge'。 |
| color | String | 按钮颜色，可选值为 'primary'、'secondary'、'success'、'danger'、'warning' 和 'info'。 | |
| isLoading | Boolean | false | 是否显示加载中状态 |
| className | String/ Object | 外部样式类名 |
示例代码
-- -------------------- ---- -------
------------------------ -
-------- ---------- -
------------------
--
--------- ------
----- ---------
----- ---------
------ ----------
---------- ------
---------- -----------------
-- ------ ------Input
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | String | 输入框的值 | |
| onchange | Function | 值改变时触发的函数 | |
| placeholder | String | 占位符 | |
| disabled | Boolean | false | 是否禁用输入框 |
| type | String | 'text' | 输入框类型，可选值为 'text'、'password' 和 'email'。 |
| size | String | 'normal' | 输入框大小，可选值为 'normal'、'small'、'large' 和 'xlarge'。 |
| className | String/ Object | 外部样式类名 |
示例代码
-- -------------------- ---- -------
----------------------- -
------ --------
--------- ----------- -
----------------------------
--
------------ ---------
--------- ------
----- -------
----- ---------
---------- ----------------
---Table
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| data | Array | [] | 表格数据 |
| header | Array | [] | 表头 |
| footer | Array | [] | 表尾 |
| striped | Boolean | false | 是否隔行斑马纹 |
| bordered | Boolean | false | 是否显示边框 |
| hoverable | Boolean | false | 是否 hover 高亮 |
| loading | Boolean | false | 是否显示加载中状态 |
| emptyMessage | String | '暂无记录' | 数据为空时显示的提示信息 |
| pageSize | Number | 10 | 每页显示的数据条数 |
| onPageSizeChange | Function | 改变每页显示条数时触发的函数，在传入 Pagination 组件中使用 |
|
| className | String/ Object | 外部样式类名 |
示例代码
-- -------------------- ---- -------
--- ---- - -
- --- -- ----- ----- ---- -- --
- --- -- ----- ----- ---- -- --
- --- -- ----- ----- ---- -- --
- --- -- ----- ----- ---- -- --
- --- -- ----- ----- ---- -- -
--
----------------------- -
----- -----
------- ------ ----- ------
-------- -----
--------- -----
---------- -----
-------- ------
------------- ------
--------- ---
----------------- -------------- -
------------------
--
---------- ----------------
---总结
以上是 fury.mithril 的使用方法和相关组件介绍，希望为前端开发者提供便利。可以根据需求，选择对应的组件来完成页面构建和功能实现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005671d81e8991b448e3815