简介
fury.mithril 是一个基于 mithril.js 的 UI 组件库,提供了丰富的组件和功能。
安装
在命令行中执行以下命令安装 fury.mithril:
--- ------- ------------
使用
- 在 HTML 中引入 mithril.js 和 fury.mithril:
------- ---------------------------------------------------- ------- --------------------------------------------------------------
- 在 JavaScript 中使用 fury.mithril 组件:
----------------------- ------------------------ - -------- ---------- - ------------------ - -- ------ -------
组件
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