前言
au-simple-components 是一个基于 Aurelia 框架的 UI 组件库，提供了丰富的组件和样式，可用于快速搭建前端界面。本文将介绍如何安装和使用该组件库。
安装
在项目根目录下执行以下命令：
npm install au-simple-components
使用
在需要使用组件的页面或组件中，引入以下样式文件：
<link rel="stylesheet" href="node_modules/au-simple-components/dist/au-simple-components.css">
并在需要使用的组件中，引入组件库，并注册所需组件。
-- -------------------- ---- -------
------ - -------- - ---- --------------------
------ - ---------------------- - ---- -----------------------
-- ------
----- ---------- - -
-----------
-----------
--
--------
-----------------------------
-- -----
------ -------- ------------------ -
--------------------------------------------------------------- -------- -- -
----------------
---
-以上代码将注册两个组件，au-alert 和 au-button，并引入组件库。
在页面中，可以直接使用注册的组件进行开发。
<template> <au-alert info>这是一个提示</au-alert> <au-button primary click.delegate="submit()">提交</au-button> </template>
组件列表
au-simple-components 提供了以下组件：
Alert
显示一条提示信息。
<au-alert success|warning|info|error [closable]>提示信息</au-alert>
success：成功提示。warning：警告提示。info：普通提示。error：错误提示。closable：可关闭。
Button
按钮组件。
<au-button primary|danger [disabled] [click.trigger]="submit()">按钮</au-button>
primary：主要按钮。danger：危险按钮。disabled：禁用状态。click.trigger：点击事件。
Checkbox
复选框组件。
<au-checkbox label="选项" [checked]="false" [disabled]="false" [change.trigger]="change()"></au-checkbox>
label：文本。checked：是否选中。disabled：禁用状态。change.trigger：值改变事件。
DatePicker
日期选择器组件。
<au-date-picker value.bind="date" [disabledDates]="['2022-01-01', '2022-01-02']" [change.trigger]="change()"></au-date-picker>
value.bind：日期选择器的值。disabledDates：不可选日期（格式为 'YYYY-MM-DD'）。change.trigger：值改变事件。
Dropdown
下拉框组件。
<au-dropdown options.bind="options" value.bind="value" [placeholder]="Select option" [disabled]="false" [change.trigger]="change()"></au-dropdown>
options.bind：数据源。value.bind：选中值。placeholder：占位符。disabled：禁用状态。change.trigger：值改变事件。
Input
输入框组件。
<au-input label.bind="Label" value.bind="Value" type="text" [disabled]="false" [change.trigger]="change()"></au-input>
label.bind：标签。value.bind：值。type：类型。disabled：禁用状态。change.trigger：值改变事件。
Modal
模态框组件。
<au-modal show.bind="showModal" title="Modal Title" [closable]="true" [onclose.trigger]="() => closeModal()" [onsubmit.trigger]="() => submitModal()"><p>xxxxxxxxxx</p></au-modal>
show.bind：是否显示。title：标题。closable：是否可关闭。onclose.trigger：关闭事件。onsubmit.trigger：提交事件。
Pagination
分页器组件。
<au-pagination current-page.bind="page" total-pages.bind="totalPages" [show-prev-next]="true" [show-first-last]="true" [change.trigger]="change()"></au-pagination>
current-page.bind：当前页数。total-pages.bind：总页数。show-prev-next：是否显示上一页、下一页按钮。show-first-last：是否显示第一页、最后一页按钮。change.trigger：页码改变事件。
Radio
单选框组件。
<au-radio label="选项" value="value" [checked]="false" [disabled]="false" [change.trigger]="change()"></au-radio>
label：文本。value：值。checked：是否选中。disabled：禁用状态。change.trigger：值改变事件。
Range
滑动条组件。
<au-range min="0" max="100" step="1" value.bind="value" [disabled]="false" [change.trigger]="change()"></au-range>
min：最小值。max：最大值。step：步长。value.bind：值。disabled：禁用状态。change.trigger：值改变事件。
Switch
开关组件。
<au-switch label.bind="Label" [checked]="false" [disabled]="false" [change.trigger]="change()"></au-switch>
label.bind：标签。checked：是否选中。disabled：禁用状态。change.trigger：值改变事件。
结语
au-simple-components 提供了丰富的组件和样式，可以大大提升前端开发效率和代码质量。希望本文可以帮助您快速上手这款组件库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005668681e8991b448e2b60