介绍
ng-material-sidemenu 是一个 AngularJS + Material Design 的侧边栏菜单组件，可以快速构建出漂亮的侧边栏菜单，提高用户体验。
其主要优点包括：
- 适配 Material Design 风格，用户体验更佳；
- 简单易用，快速构建出漂亮的侧边栏菜单；
- 可以自定义样式，灵活性更高。
安装
要使用该组件，首先需要安装依赖包：
npm install ng-material-sidemenu --save
然后在 HTML 文件中引入依赖：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/angular-material/angular-material.min.css"> <link rel="stylesheet" href="./node_modules/ng-material-sidemenu/dist/ng-material-sidemenu.min.css"> <script src="https://cdn.jsdelivr.net/npm/angular/angular.js"></script> <script src="https://cdn.jsdelivr.net/npm/angular-animate/angular-animate.js"></script> <script src="https://cdn.jsdelivr.net/npm/angular-aria/angular-aria.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/angular-messages/angular-messages.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/angular-material/angular-material.min.js"></script> <script src="./node_modules/ng-material-sidemenu/dist/ng-material-sidemenu.min.js"></script>
使用方法
在 AngularJS 的代码中，定义一个数组 menuItems，用来存放菜单项，每个菜单项应该包括以下属性：
name：菜单项名称；state：菜单项对应视图状态，即 AngularJS 的路由状态；icon：菜单项图标，可以使用 Material Design 提供的 icon 字符串；disabled：菜单项是否禁用。
angular.module("myApp", ["ngMaterial", "ngMaterialSidemenu"])
.controller("Ctrl", function($scope) {
$scope.menuItems = [
{name: '主页', state: 'home', icon: 'home'},
{name: '设置', state: 'settings', icon: 'settings'}
];
});然后在 HTML 中使用 md-sidemenu 元素，在其中引用上面定义的 menuItems 数组即可。
<md-sidemenu menu-items="menuItems"></md-sidemenu>
同时要定义好 AngularJS 的路由规则：
angular.module("myApp", ["ngMaterial", "ngMaterialSidemenu", "ui.router"])
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state("home", { url: "/", templateUrl: "home.html" })
.state("settings", { url: "/settings", templateUrl: "settings.html" });
});自定义样式
ng-material-sidemenu 支持自定义样式，可以通过 CSS 文件中定义 md-sidemenu 元素的样式来实现。
以下是一些可能用到的样式选项：
background-color：侧边栏菜单背景颜色；color：菜单项字体颜色；font-size：菜单项字体大小；md-selected-item：选中的菜单项样式；md-disabled-item：禁用的菜单项样式。
示例代码：
-- -------------------- ---- ------- ----------- - ----------------- -------- - ----------- ---------- - ------ ----- ---------- ----- - ----------- --------------------------- - ----------------- ----- - ----------- --------------------------- - -------- ---- -
完整示例
HTML 文件：
-- -------------------- ---- -------
--------- -----
----- --------- ---------------
------
----- ----------------
-----------------------------------
----- ---------------- ------------------------------------------------------------------------------
----- ---------------- -----------------------------------------------------------------------------
-------
----------- -
----------------- --------
-
----------- ---------- -
------ -----
---------- -----
-
----------- --------------------------- -
----------------- -----
-
----------- --------------------------- -
-------- ----
-
--------
-------
----- ---------------------
------------
------------
---- -------------------------
---------- ------------------------------------
----- ------------
------
-------------
----------- ---------------------- -----------------
----------------------
-------------------------------------
-------------------
---------------------------
-
---------
------------- --------------- -- ----------
------------------------
-----------------
------------------------------ ----------------- ------------------- ---------------
-
-------- ---------------------------------------
--------------------
---------------
----------
-------------
---- ------------ -----
---- ------- -----------
------
-------------
------- ---------------------------------------------------------------
------- -------------------------------------------------------------------------------
------- -----------------------------------------------------------------------------
------- -------------------------------------------------------------------------------------
------- -------------------------------------------------------------------------------------
------- ------------------------------------------------------------------------------------
------- -----------------------------------------------------------------------------------------------
--------
----------------------- -------------- --------------------- -------------
------------------- ---------------- ----------- ------- -
---------------- - -
------ ----- ------ ------- ----- --------
------ ----- ------ ----------- ----- -----------
--
--------------- - ---------- -
----------------------------
--
---------------- - ---------- -
---------------------------
--
----------------- - -------------- -
------ ------------------- --- -----------
--
--
-------------------------------- ------------------- -
----------------------------------
--------------
-------------- - ---- ---- ------------ ----------- --
------------------ - ---- ------------ ------------ --------------- ---
---
---------
-------
-------home.html 文件：
<h1>这是主页</h1>
settings.html 文件：
<h1>这是设置页面</h1>
结语
ng-material-sidemenu 是一个非常实用的包，可以让开发者快速构建出漂亮的侧边栏菜单，方便用户使用。通过本文的学习，相信读者们已经掌握了该组件的主要用法，可以在实际项目中灵活运用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600563d481e8991b448e12d7