前言
au-simple-components 是一个基于 Aurelia 框架的 UI 组件库,提供了丰富的组件和样式,可用于快速搭建前端界面。本文将介绍如何安装和使用该组件库。
安装
在项目根目录下执行以下命令:
--- ------- --------------------
使用
在需要使用组件的页面或组件中,引入以下样式文件:
----- ---------------- -----------------------------------------------------------------------
并在需要使用的组件中,引入组件库,并注册所需组件。
------ - -------- - ---- -------------------- ------ - ---------------------- - ---- ----------------------- -- ------ ----- ---------- - - ----------- ----------- -- -------- ----------------------------- -- ----- ------ -------- ------------------ - --------------------------------------------------------------- -------- -- - ---------------- --- -
以上代码将注册两个组件,au-alert
和 au-button
,并引入组件库。
在页面中,可以直接使用注册的组件进行开发。
---------- --------- ---------------------- ---------- ------- ---------------------------------------- -----------
组件列表
au-simple-components 提供了以下组件:
Alert
显示一条提示信息。
--------- -------------------------- --------------------------
success
:成功提示。warning
:警告提示。info
:普通提示。error
:错误提示。closable
:可关闭。
Button
按钮组件。
---------- -------------- ---------- -----------------------------------------
primary
:主要按钮。danger
:危险按钮。disabled
:禁用状态。click.trigger
:点击事件。
Checkbox
复选框组件。
------------ ---------- ----------------- ------------------ ------------------------------------------
label
:文本。checked
:是否选中。disabled
:禁用状态。change.trigger
:值改变事件。
DatePicker
日期选择器组件。
--------------- ----------------- ------------------------------- -------------- ---------------------------------------------
value.bind
:日期选择器的值。disabledDates
:不可选日期(格式为 'YYYY-MM-DD')。change.trigger
:值改变事件。
Dropdown
下拉框组件。
------------ ---------------------- ------------------ --------------------- ------- ------------------ ------------------------------------------
options.bind
:数据源。value.bind
:选中值。placeholder
:占位符。disabled
:禁用状态。change.trigger
:值改变事件。
Input
输入框组件。
--------- ------------------ ------------------ ----------- ------------------ ---------------------------------------
label.bind
:标签。value.bind
:值。type
:类型。disabled
:禁用状态。change.trigger
:值改变事件。
Modal
模态框组件。
--------- --------------------- ------------ ------ ----------------- --------------------- -- ------------- ---------------------- -- -------------------------------------------
show.bind
:是否显示。title
:标题。closable
:是否可关闭。onclose.trigger
:关闭事件。onsubmit.trigger
:提交事件。
Pagination
分页器组件。
-------------- ------------------------ ----------------------------- ----------------------- ------------------------ --------------------------------------------
current-page.bind
:当前页数。total-pages.bind
:总页数。show-prev-next
:是否显示上一页、下一页按钮。show-first-last
:是否显示第一页、最后一页按钮。change.trigger
:页码改变事件。
Radio
单选框组件。
--------- ---------- ------------- ----------------- ------------------ ---------------------------------------
label
:文本。value
:值。checked
:是否选中。disabled
:禁用状态。change.trigger
:值改变事件。
Range
滑动条组件。
--------- ------- --------- -------- ------------------ ------------------ ---------------------------------------
min
:最小值。max
:最大值。step
:步长。value.bind
:值。disabled
:禁用状态。change.trigger
:值改变事件。
Switch
开关组件。
---------- ------------------ ----------------- ------------------ ----------------------------------------
label.bind
:标签。checked
:是否选中。disabled
:禁用状态。change.trigger
:值改变事件。
结语
au-simple-components 提供了丰富的组件和样式,可以大大提升前端开发效率和代码质量。希望本文可以帮助您快速上手这款组件库。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6005668681e8991b448e2b60