简介
ember-off-canvas-components 是一个 Ember.js 的插件，用于创建自定义全屏侧栏菜单。这个插件可以轻松地添加侧边栏菜单到你的 Ember.js 应用程序中，提高整体用户体验。
这篇文章将会教你如何安装和使用这个插件。
安装
在你的 Ember 应用程序中，安装 ember-off-canvas-components 插件十分简单，只需运行以下命令：
ember install ember-off-canvas-components
这就会自动将插件添加到你的应用程序中，并且你可以开始使用它来创建全屏侧栏菜单了。
使用
要使用这个插件，你可以在你的组件中引入 OffCanvas 模块，然后创建一个侧边栏菜单，如下所示：
-- -------------------- ---- -------
------ --------- ---- -------------------
------ - ---------- ----------------- ---------------- - ---- ------------------------------
------ ------- ------------------
---------------- ------
-------- -
----------------- -
---------------------------------------
-
-
---在 template.hbs 文件中，你可以组合 OffCanvas 、OffCanvasContent 和 OffCanvasSidebar 的组件：
-- -------------------- ---- -------
------------- -------------------- -- ----------
--------------------- ---------------
---- ---- ------- ------- ---
-----------------------
--------------------- ---------------
---- ---- ---- ------- ---
-----------------------
---------------在 isOffCanvasOpen 变量上，我们定义了一个 toggleOffCanvas 的 action 来控制侧边栏的展开和收缩。
此外，在 off-canvas-sidebar 和 off-canvas-content 组件中，我们将 canvas 对象传递给它们来控制它们在侧边栏展开期间的样式。
示例代码
-- -------------------- ---- -------
------ --------- ---- -------------------
------ - ---------- ----------------- ---------------- - ---- ------------------------------
------ ------- ------------------
---------------- ------
-------- -
----------------- -
---------------------------------------
-
-
----- -------------------- ---- -------
------------- -------------------- -- ----------
--------------------- ---------------
----
------ ------------- ----------
------ ------------- ----------
------ ------------- ----------
------ ------------- ----------
-----
-----------------------
--------------------- ---------------
------- -------- -------------------------- ----------------
------- ------- --------
-----------------------
---------------结论
ember-off-canvas-components 插件可以轻松地将全屏侧栏菜单添加到你的 Ember.js 应用程序中。安装和使用该模块也是十分简单的，通过上述示例代码即可在自己的应用程序中轻松添加侧边栏菜单，从而提高整体用户体验，希望本篇文章对大家有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e15a563576b7b1ec9fc