简介
React-itra-sidenav 是一个 React 库，提供了一个简单易用的侧边栏组件。该组件支持多层级菜单和左右两种样式，并且用户可以通过配置实现自定义样式和图标等功能。
安装
该组件已经发布到 npm 上，可以通过 npm 安装。
npm install react-itra-sidenav --save
使用
在引入组件之前，需要先引入相关的样式文件。
import 'react-itra-sidenav/dist/index.css';
import { SideNav, SideNavItem } from 'react-itra-sidenav';API
SideNav
| Name | Type | Default | Description |
|---|---|---|---|
| style | Object | 自定义样式 | |
| className | string | 自定义类名 | |
| children | ReactNode | 级联菜单 | |
| defaultOpenKeys | string[] | 默认展开的菜单 | |
| defaultSelected | string | 默认选中的菜单 | |
| onSelect | (key: string) => void | 菜单选择事件，参数为选中的菜单项 key 值，供用户处理自己的业务逻辑 |
SideNavItem
| Name | Type | Default | Description |
|---|---|---|---|
| style | Object | 自定义样式 | |
| className | string | 自定义类名 | |
| key | string | 菜单项的标识符 | |
| title | string | ReactNode | 菜单项的显示文本 | |
| children | ReactNode | 子菜单 | |
| icon | ReactNode | 菜单项的图标 |
示例
一个简单的示例：
-- -------------------- ---- -------
------ ------------------------------------
------ - -------- ----------- - ---- ---------------------
-------- ----- -
------ -
---------
------------ ---------- -- ------- --
------------ ---------- -- ------- --
------------ ---------- -- ------- --
----------
--
-更复杂的示例：
-- -------------------- ---- -------
------ ------------------------------------
------ - -------- ----------- - ---- ---------------------
-------- ----- -
------ -
-------- -------------------------- ------------------- --------------- -- ------------------
------------ ---------- -- ------- ----------- ----------- --- --
------------ ---------- -- ------- ----------- ------------------- --- --
------------ ---------- -- ------- ----------- ------------- --- --
------------ ---------- -- ---------- ----------- ----------- ----
------------ ---------- ---- --------- --
------------ ---------- ---- --------- --
------------ ---------- ---- --------- --
------------ ---------- ---- --------- --
--------------
------------ ---------- -- ---------- ----------- -------------- ----
------------ ---------- ---- --------- --
------------ ---------- ---- --------- --
------------ ---------- ---- --------- --
------------ ---------- ---- --------- --
--------------
----------
--
-总结
React-itra-sidenav 组件提供了一种简单易用的解决方案，可以帮助开发人员快速实现网站的菜单导航功能。
使用该组件，开发人员无需自己编写复杂的 CSS 样式和 JavaScript 逻辑，只需要简单地配置组件的参数即可实现自己想要的效果。
此外，该组件为用户提供了灵活的 API，可以自定义各种展示和交互效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601681e8991b448de31e