简介
mithrandir 是一个基于 Mithril 框架的命令式 UI 库。它为 Mithril 框架提供了一些常用的 UI 组件，例如按钮、文本框、下拉框等等。我们可以用这些组件构建出漂亮且易用的用户界面。
安装
使用 npm 安装 mithrandir：
npm install mithrandir
使用
导入要使用的组件，例如：
import { Button, Input, Select } from 'mithrandir';然后就可以在 Mithril 的视图函数中使用这些组件了。例如：
-- -------------------- ---- -------
------ - ---- ----------
------ - ------- ------ ------ - ---- -------------
----- ----------- - -
----- ---------- -
------ -------- -
-------- - ------ -------- ----- ------ ---
--------- --------
--------- - ------ --------- -------- --------- --------- --------- ---
---
--
--上面的代码展示了如何在 Mithril 的视图函数中使用 mithrandir 组件。我们可以看到，这些组件的使用非常简单，甚至可以像普通的 DOM 元素一样使用。
组件
下面是 mithrandir 提供的一些常用组件的介绍和使用示例：
Button
按钮组件。可以指定按钮的文本、类型（例如 primary、danger、warning 等等）、禁用状态等等。
import { Button } from 'mithrandir';
m(Button, { type: 'primary' }, 'Save');Input
文本框组件。可以指定文本框的 label、name、type（例如 text、password 等等）、初始值、禁用状态等等。
import { Input } from 'mithrandir';
m(Input, { label: 'Name:', name: 'name' });Select
下拉框组件。可以指定下拉框的 label、name、选项等等。
import { Select } from 'mithrandir';
m(Select, { label: 'Fruit:', options: ['apple', 'banana', 'cherry'] });Checkbox
复选框组件。可以指定复选框的 label、name、初始值等等。
import { Checkbox } from 'mithrandir';
m(Checkbox, { label: 'Remember me', name: 'remember' });Radio
单选框组件。可以指定单选框的 label、name、选项等等。
import { Radio } from 'mithrandir';
m(Radio, { label: 'Gender:', name: 'gender', options: ['male', 'female'] });Textarea
文本域组件。可以指定文本域的 label、name、初始值等等。
import { Textarea } from 'mithrandir';
m(Textarea, { label: 'Comment:', name: 'comment' });示例
下面是一个使用 mithrandir 组件构建的登录界面的示例代码：
-- -------------------- ---- -------
------ - ---- ----------
------ - ------- ----- - ---- -------------
----- ----- - -
----- ---------- -
------ -------- -
------- ---------
--------- -
-------- - ------ ------------ ----- ----------- ----- ------ ---
-------- - ------ ------------ ----- ----------- ----- ---------- ---
--------- - ----- --------- -- ----------
---
---
--
--
---------------------- -------我们可以看到，使用 mithrandir 组件可以很容易地构建出漂亮且易用的用户界面。
指导意义
mithrandir 是一个简单易用的 UI 库，为 Mithril 框架提供了一些常用的 UI 组件。使用它可以省去我们重新实现这些组件的时间，并且可以实现组件的复用，减少冗余代码。同时，它的学习曲线也比较平缓，即使是刚刚开始学习 Mithril 的人也可以很容易地上手使用。
总之，如果你正在开发基于 Mithril 的应用，并且需要构建一些常见的 UI 组件，那么 mithrandir 会是一个不错的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566c181e8991b448e31c0