简介
hanastaroth-ember-common 是一款基于 Ember.js 的 UI 组件库，提供组件样式和交互行为的开发。本文将为大家介绍如何安装和使用这个库，以及其中一些重要的组件的使用方法。
安装
- 在项目中安装
hanastaroth-ember-common包。
$ npm install hanastaroth-ember-common --save
- 在
ember-cli-build.js文件中添加以下代码：
app.import('node_modules/hanastaroth-ember-common/dist/hanastaroth-ember-common.css');
app.import('node_modules/hanastaroth-ember-common/dist/hanastaroth-ember-common.js');这样就可以在项目中引入组件库了。
组件使用
基础组件
Button 组件
Button 组件是模拟 HTML button 标签的交互行为，提供了三种样式：
- Primary
- Secondary
- Tertiary
示例代码：
{{#hs-button style="primary"}}Primary{{/hs-button}}
{{#hs-button style="secondary"}}Secondary{{/hs-button}}
{{#hs-button style="tertiary"}}Tertiary{{/hs-button}}Alert 组件
Alert 组件用于显示一些提示消息，提供了四种样式：
- Success
- Info
- Warning
- Danger
示例代码：
{{#hs-alert style="success"}}Success!{{/hs-alert}}
{{#hs-alert style="info"}}Info!{{/hs-alert}}
{{#hs-alert style="warning"}}Warning!{{/hs-alert}}
{{#hs-alert style="danger"}}Danger!{{/hs-alert}}Input 组件
Input 组件用于输入文本信息，提供了三种类型：
- Text
- Number
- Password
示例代码：
{{hs-input label="Name" value=name}}
{{hs-input type="number" label="Age" value=age}}
{{hs-input type="password" label="Password" value=password}}Checkbox 组件
Checkbox 组件用于表单中选择一项或多项，提供了两种样式：
- Default
- Switch
示例代码：
{{hs-checkbox label="Male" value=male}}
{{hs-checkbox style="switch" label="Female" value=female}}进阶组件
Form 组件
Form 组件用于管理一个表单，提供了表单验证、提交等功能。示例代码：
{{#hs-form model=model onSubmit=(action "submitForm") as |f|}}
{{f.input label="Name" name="name" required=true}}
{{f.checkbox label="Male" name="male"}}
{{f.textarea label="Biography" name="bio"}}
{{f.submit "Submit"}}
{{/hs-form}}Table 组件
Table 组件用于展示表格数据，支持排序、过滤等功能。示例代码：
{{#hs-table content=model.tableContent columns=model.tableColumns as |t|}}
{{#each t.columns as |column|}}
{{t.header column=column}}
{{/each}}
{{#each t.content as |row|}}
{{t.row row=row}}
{{/each}}
{{/hs-table}}总结
hanastaroth-ember-common 是一个功能强大的 UI 组件库，为 Ember.js 界提供了非常多的帮助。本文简要介绍了其基础和一些进阶组件的使用方法，供读者参考。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d3381e8991b448daf2e