npm 包 mithril-hobbit 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

mithril-hobbit 是一个基于 mithril 的前端组件库，旨在提供常用组件的封装和样式定义等，并支持可自定义主题。

安装

使用 npm 安装：

npm install mithril-hobbit --save

使用

在代码中引入 mithril 和 mithril-hobbit：

import m from 'mithril';
import { Button } from 'mithril-hobbit';

m.mount(document.body, Button({label: 'hello'}));

上面的代码会在页面上渲染一个带有 label 文本为 hello 的按钮。

API

以下是 mithril-hobbit 提供的常用组件及其 API。

Button

import { Button } from 'mithril-hobbit';

props：

label: string，按钮文本
onClick: function，按钮点击事件

Input

import { Input } from 'mithril-hobbit';

props：

label: string，输入框前的标签文本
value: string，输入框的值
onChange: function，输入框值改变事件

Checkbox

import { Checkbox } from 'mithril-hobbit';

props：

label: string，复选框前的标签文本
value: boolean，复选框的选中状态
onChange: function，复选框状态改变事件

Radio

import { Radio, RadioGroup } from 'mithril-hobbit';

props：

label: string，单选框前的标签文本
value: string，单选框的值
onChange: function，单选框值改变事件

RadioGroup：

value: string，当前选中项的值，受控组件需要
onChange: function，单选框值改变事件
options: array，单选框选项的值和文本，形如 [ {label: '文本1', value: '值1'}, {label: '文本2', value: '值2'} ]

Select

import { Select } from 'mithril-hobbit';

props：

label: string，下拉框前的标签文本
value: string，下拉框选中项的值
onChange: function，下拉框选中项改变事件
options: array，下拉框选项的值和文本，形如 [ {label: '文本1', value: '值1'}, {label: '文本2', value: '值2'} ]

主题

mithril-hobbit 支持自定义主题，可以通过修改变量达到自定义样式的效果。

常用变量

下面是一些常用的样式变量，你可以将它们定义在 Less 或 Sass 文件中，以达到自定义主题的目的：

@primary-color: #007aff; // 主色调
@text-color: #333; // 文字颜色
@font-size: 14px; // 字号
@border-radius: 3px; // 圆角
@default-bg-color: #fff; // 默认背景色
@form-item-margin-bottom: 10px; // 表单项之间的间距

示例代码

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

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

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

结语

以上是 mithril-hobbit 的使用教程，希望对大家有帮助。如果你在使用过程中遇到问题，可以参考官方文档或提交 issue，我们会及时处理。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60065f71238a385564ab6788