前端开发中，UI 表单的制作往往是重复性劳动，且风格统一性难以保证。为了方便开发者，社区中常常出现一些好用的 UI 库和框架，如 Semantic UI。但 Semantic UI 使用起来可能会有些繁琐，需要保证一些命名规范和 HTML 结构，导致使用起来不太灵活。
此时，我们可以用 npm 包 bz-semantic-ui-form 为基础，进行快速表单制作。
什么是 bz-semantic-ui-form
bz-semantic-ui-form 是一个基于 Semantic UI 的 npm 包，封装了 Semantic UI 表单的样式，提供完整且易用的表单组件。
安装 bz-semantic-ui-form
使用 npm 安装 bz-semantic-ui-form：
--- ------- -------------------
使用 bz-semantic-ui-form
在页面中引入需要的依赖。
----- ---------------- --------------------------------------------------------------------------------- ------- --------------------------------------------------------------------------------- ------- ----------------------------------------------------------------------------------------
然后，就可以使用 bz-semantic-ui-form 提供的组件进行表单制作。
Input 输入框
---- --------- -------
------------------
---- --------- ---- ---- -------
------ ----------- --------------- ---------------------
-- ----------- ----------
------
------Dropdown 下拉框
---- --------- -------
-----------------
---- --------- --------- ----------
------ ------------- --------------
-- --------------- ----------
---- -------------- -----------------
---- -------------
---- ------------ ----------------------
---- ------------ ----------------------
------
------
------Checkbox 多选框
---- --------- -------
-----------------
---- -------------- --------
---- --------------
---- --------- ----------
------ --------------- ------------ ------------ -------------- ----------
-----------------
------
------
---- --------------
---- --------- ----------
------ --------------- ------------ ------------ -------------- ----------
-----------------
------
------
---- --------------
---- --------- ----------
------ --------------- ------------ ------------ -------------- ----------
-----------------
------
------
------
------Radio 单选框
---- --------- -------
-----------------
---- -------------- --------
---- --------------
---- --------- ----- ----------
------ ------------ ------------- ------------ -------------- ----------
----------------
------
------
---- --------------
---- --------- ----- ----------
------ ------------ ------------- ------------ -------------- ----------
----------------
------
------
------
------总结
bz-semantic-ui-form 让 UI 表单的制作更加简单，使用起来更加灵活。在实际开发中，尽量避免重复造轮子，使用社区开源项目可以让开发效率大大提升。
参考
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066c8fccdc64669dde5783