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