ember-frost-action-bar是一个方便易用的工具，可以在Ember.js应用中创建一个可自定义的操作栏。本教程将详细介绍如何使用这个npm包，以及如何用它在你的应用程序中创建操作栏。
安装
你可以使用npm在你的Ember.js应用程序中安装ember-frost-action-bar。在终端中，使用以下命令：
npm install --save-dev ember-frost-action-bar
使用
在你的应用程序中，使用以下代码在模板中创建操作栏：
{{frost-action-bar
items=items
primaryAction=(hash
text='Save'
action=(action 'save')
)
}}在你的控制器或组件中，定义一个items数组提供操作栏上的其余项目：
-- -------------------- ---- -------
------ -
-
----- -------
------- ------
--
-
----- ---------
------- --------
-
-这样你就有了一个基本的操作栏。下一步是自定义它。使用以下代码中的选项来更改操作栏的行为和样式：
-- -------------------- ---- -------
------------------
-----------
-------------------
-----------
-------------- -------
-
---------------------
-----------------
-------------- -------------
-
---------------------- ---------------
------------
------------- ------------
-----------------------------
--下面是上述代码的解释：
secondaryAction属性提供一个附加的按钮，可以用来切换操作栏的下拉菜单或弹出窗口。onItemSelected属性是一个回调函数，这个函数会在当操作栏上的某个项目被选中时被触发。size属性可以指定操作栏的大小，可以是'small'、'medium'或'large'。disabled属性可以禁用整个操作栏。className属性可以为操作栏名称提供自定义的CSS类名。
示例代码
下面是一个使用具有3个项目和下拉菜单的大型操作栏的示例代码：
-- -------------------- ---- -------
------------------
-----------
---------------------
-----------------
---------------- -------------
--------------
-----------
-----------------------
-
------------
-----------------------------
--控制器中的项目数组和下拉菜单数组应如下所示：
-- -------------------- ---- -------
------ -
-
----- -------
----- -------
------- ------
--
-
----- --------
----- ---------
------- --------
--
-
----- -------
----- -------
------- ------
-
--
---------- -
-
----- --------
------- -------
--
-
----- ---------
------- --------
-
-这个示例操作栏在页面上将呈现如下图所示：
总结
使用ember-frost-action-bar在你的Ember.js应用程序中创建操作栏非常容易。只需定义一个项目数组，并使用可自定义的选项来构建你需要的操作栏，你就可以轻松创建一个用户友好的界面，让用户轻松地执行相关操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e18a563576b7b1ecb55