简介
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