简介
ember-sidebars 是一个基于 Ember.js 的侧栏插件，用于在 Web 应用中创建浮动的导航栏目。它非常易于使用，而且可以帮助你快速创建有吸引力的导航栏目。本文将介绍如何使用 ember-sidebars，帮助你更好地了解这个插件。
安装
如果你还没有安装 Ember.js，则需要先安装。然后，你可以通过以下命令安装 ember-sidebars：
npm install ember-sidebars
这将在你的应用程序中安装最新版本的 ember-sidebars。
使用
首先，在你的项目中导入 ember-sidebars：
import SideBars from 'ember-sidebars';
然后，在你的 HTML 页面中添加一个容器，用于存放你的导航栏目：
<div id="sidebar-container"></div>
接下来，在你的 JS 文件中使用以下代码来初始化它：
-- -------------------- ---- -------
----- ------- - --- ----------
--- --------------------
------ -
-
------ -------
------ -------
--
-
------ ----------
------ ---------
-
-
---这样就可以创建出一个包含“Home”和“Contact”的侧栏了。你可以通过设置其他属性来改变其外观和行为。
属性
id：
string类型，用于指定容器的 ID 或 class。items：
array类型，用于指定侧栏栏目的数组。每个栏目包含以下属性：label：
string类型，用于指定栏目的名称。route：
string类型，用于指定栏目的路由名称。
position：
string类型，用于指定侧栏的位置。目前支持left和right两种位置。isOpen：
boolean类型，用于指定侧栏是否默认打开。默认为false。width：
string类型，用于指定侧栏的宽度。默认为250px。onOpen：
function类型，用于指定侧栏打开时的回调函数。onClose：
function类型，用于指定侧栏关闭时的回调函数。
示例代码
下面是一个完整的示例代码：
-- -------------------- ---- -------
------
------
--------------------- ------------
-------
------
---- -----------------------------
------- -----------------------------------------------------------
------- ---------------------------------
------- ------------------------------------
------- ------------------------------------------
--------
------ -------- ---- -----------------
----- ------- - --- ----------
--- --------------------
------ -
-
------ -------
------ -------
--
-
------ ----------
------ ---------
--
-
------ ------ ----
------ -------
-
--
--------- -------
------- ------
------ --------
------- -------- -- -
-------------------- ----------
--
-------- -------- -- -
-------------------- ----------
-
---
---------
-------
-------结语
ember-sidebars 是一个非常有用的插件，可以帮助你快速创建漂亮的侧栏导航。本文介绍了如何使用该插件以及其主要属性，希望对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e1ea563576b7b1ecd10