简介
@themarshalsgroup/ember-ui 是一个 Ember.js UI 组件库，其中包含了按钮、输入框、下拉框等常用的 UI 组件。
使用该包可以在 Ember.js 项目中快速搭建 UI 界面，提高开发效率。
安装
首先，需要安装 Node.js 和 npm。可以在 Node.js 官网 下载安装包。
在终端中执行以下命令安装 @themarshalsgroup/ember-ui 包：
npm install @themarshalsgroup/ember-ui
使用
引入组件
在需要使用组件的地方引入组件，例如：
import { Button } from '@themarshalsgroup/ember-ui';组件列表
@themarshalsgroup/ember-ui 包含以下组件：
Button
import { Button } from '@themarshalsgroup/ember-ui';
<Button @text='Click me!' />该组件用于展示一个按钮。
| 参数 | 类型 | 说明 |
|---|---|---|
| text | string | 按钮上的文本 |
| onClick | function | 点击按钮时的回调函数 |
Input
import { Input } from '@themarshalsgroup/ember-ui';
<Input @placeholder='Please enter your name' />该组件用于展示一个输入框。
| 参数 | 类型 | 说明 |
|---|---|---|
| placeholder | string | 输入框中的提示文本 |
| onChange | function | 输入框内容变化时的回调函数 |
Select
import { Select } from '@themarshalsgroup/ember-ui';
<Select @options={{this.options}} />该组件用于展示一个下拉框。
| 参数 | 类型 | 说明 |
|---|---|---|
| options | array | 下拉框中选项的数组 |
| value | string | 下拉框中选中的值 |
| onChange | function | 下拉框选中值改变时的回调函数 |
示例代码
下面是一个完整的示例代码：
-- -------------------- ---- -------
------ --------- ---- ---------------------
------ - ------ - ---- ----------------
------ - ------- ------ ------ - ---- -----------------------------
------ ------- ----- ----------- ------- --------- -
------- - -
- ------ -------- ------ ------- --
- ------ --------- ------ -------- --
- ------ --------- ------ -------- --
--
---------- - ---
-------
------------------- -
------------------- ----------
-
-------
------------------------ -
--------------- - ------
-
-------
------------------------- -
------------------------ -------
-
--- ---------------- -
------ ------------------------ -- ------------ --- -----------------
-
--- ------------- -
------ ------------------- - ------------------------- - ----------
-
-------
------------------ -
--------------- - ---
------------------ ----------
-
--- ----------------- -
------ -------------------------- -- ----------------------------------------
-
--- --------------- -
------ ------------------------------- -- -- ------ ------------- ------ -------------------------- ----
-
-<Button @text='Click me!' @onClick={{this.handleButtonClick}} />
<Input @placeholder='Please enter your name' @onChange={{this.handleInputChange}} />
<Select @options={{this.selectOptions}} @value={{this.selectValue}} @onChange={{this.handleSelectChange}} />
<Button @text='Reset' @onClick={{this.handleResetClick}} />总结
@themarshalsgroup/ember-ui 是一个实用的 UI 组件库，可以提高 Ember.js 项目的开发效率。本文介绍了该组件库的安装、使用以及组件列表，并提供了示例代码。希望本文能对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ca081e8991b448da056