在前端开发中，我们经常需要用到各种 UI 组件来帮助我们构建用户界面，其中一个基础的组件就是垂直菜单。这时我们可以使用 NPM 上的 @ngx-kit/ui-vertical-menu 包来快速构建一个垂直菜单。
在本篇文章中，我们将详细介绍如何使用 @ngx-kit/ui-vertical-menu 包，包含深度和学习以及指导意义，并提供示例代码。
安装 @ngx-kit/ui-vertical-menu 包
首先，我们需要安装 @ngx-kit/ui-vertical-menu 包，在项目根目录下打开终端或命令提示符，运行以下命令：
npm install @ngx-kit/ui-vertical-menu --save
初始化垂直菜单
在 Angular 中使用 @ngx-kit/ui-vertical-menu 包时，我们需要先在 app.module.ts 中引入该包：
-- -------------------- ---- -------
------ - --------------- - ---- ----------------------------
-----------
------------- -
------------
--
-------- -
--------------
---------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -接下来，在我们的组件中使用 NgxUiMenuComponent 组件来初始化垂直菜单，如下所示：
<ngx-ui-menu [items]="menuItems"></ngx-ui-menu>
这里将 menuItems 绑定到 NgxUiMenuComponent 的 items 属性上。我们需要在组件中定义 menuItems 对象，包含所有菜单项的信息。
定义菜单项
在组件中，我们定义 menuItems 如下所示：
-- -------------------- ---- -------
--------- - -
----- --------------------
------ -------
------ -
-
------ --- ---
----------- ---------
--
-
------ --- ---
----------- ---------
----- --- ----------
------ -
-
------ --- -----
----------- -----------
--
-
------ --- -----
------------ ------------------------
--
--
--
-
------ --- ---
----------- ---------
----- --- -------------
--
--
--以上代码定义了一个包含三个菜单项的 menuItems 对象。
其中，logo 属性指向菜单的 logo 图片文件；title 属性指定菜单的标题。items 属性是一个数组，包含多个菜单项。每个菜单项都包含 label、routerLink 和 icon 属性，label 用来表示菜单项的文字，routerLink 和 externalUrl 属性用来指定菜单项的链接。
菜单项可以嵌套，如上例中的链接 2 中有两个子链接 2-1 和 2-2。
配置主题
@ngx-kit/ui-vertical-menu 包提供了多种 UI 主题，我们可以选择其中一种来定制我们的垂直菜单。以默认主题 blue 为例，在 app.component.scss 文件中添加以下代码：
-- -------------------- ---- ------- ------- --------------------------------------------------- -- -------- ----- --------- ---------------- -------- ---------------------- -------- --------------------------- -------- ---------------------------------- -------- -------- ---------------------------------
以上代码在默认主题的基础上，定义了一些颜色变量，并调用了 ngx-kit-ui-vertical-menu-theme() 函数来应用主题。
示例代码
此处为一个完整的示例代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
------------ ----------------------------------
--
---------- -------------------------
--
------ ----- ------------ -
--------- - -
----- --------------------
------ -------
------ -
-
------ --- ---
----------- ---------
--
-
------ --- ---
----------- ---------
----- --- ----------
------ -
-
------ --- -----
----------- -----------
--
-
------ --- -----
------------ ------------------------
--
--
--
-
------ --- ---
----------- ---------
----- --- -------------
--
--
--
-总结
使用 @ngx-kit/ui-vertical-menu 包可以非常方便地构建垂直菜单。我们只需要定义菜单项，然后在组件中引入 NgxUiMenuComponent 即可。此外，还可以通过应用主题来定制菜单的颜色、背景等样式。
希望这篇文章对您有所帮助，让您能够更加快速地构建垂直菜单。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d630d0927023822c2f