在前端开发中，UI 组件是非常重要的一环。为了提高开发效率，很多前端框架或库也提供了自己的 UI 组件库。而 bz-semantic-ui-menu 正是一个基于 Semantic UI 实现的菜单组件。下面将为大家介绍如何使用这个组件。
1. 安装
bz-semantic-ui-menu 是一个 npm 包，使用前需要先安装。可以使用 npm 命令来安装：
npm install bz-semantic-ui-menu
2. 使用
引入组件：
import { BzMenu, BzMenuItem } from 'bz-semantic-ui-menu';使用组件：
<BzMenu> <BzMenuItem>菜单项 1</BzMenuItem> <BzMenuItem>菜单项 2</BzMenuItem> <BzMenuItem>菜单项 3</BzMenuItem> </BzMenu>
我们也可以给菜单项添加图标：
<BzMenu> <BzMenuItem icon='home'>首页</BzMenuItem> <BzMenuItem icon='user'>用户</BzMenuItem> <BzMenuItem icon='setting'>设置</BzMenuItem> </BzMenu>
还可以通过 activeIndex 属性来设置当前选中的菜单项：
<BzMenu activeIndex={1}>
<BzMenuItem>菜单项 1</BzMenuItem>
<BzMenuItem>菜单项 2</BzMenuItem>
<BzMenuItem>菜单项 3</BzMenuItem>
</BzMenu>3. API
BzMenu
| Name | Type | Default | Description |
|---|---|---|---|
| activeIndex | number | 当前选中的菜单项的 index。如果不设置，则默认选中 index 为 0 的菜单项。 | |
| onItemClick | function(index: number, event: SyntheticEvent) | undefined | 菜单项被点击时回调函数。第一个参数为点击的菜单项的 index，第二个参数为事件对象。 |
BzMenuItem
| Name | Type | Default | Description |
|---|---|---|---|
| icon | string | 菜单项的图标。使用 iconfont。 |
4. 示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- ---------- - ---- ----------------------
----- ----------- ------- --------------- -
----------- - ------- ------ -- -
----------------- ---- ------- - -- --------- -------
-
-------- -
------ -
------- --------------- -------------------------------
--------------- --------------
----------- ---------------------------
----------- ---------------------------
----------- ------------------------------
---------
--
-
-通过上面的简单介绍，相信大家已经可以快速上手 bz-semantic-ui-menu 了。希望这篇文章能够对大家在日常的前端开发工作中有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8fccdc64669dde5788