React Pro Sidebar
[![npm][version]][npm-url] [![License][license]][npm-url] [![Peer][peer]][npm-url] [![Download][download]][npm-url] [![Stars][stars]][github-url]
React Pro Sidebar 提供了一组用于创建高级和可定制侧边导航的组件
旧版本
在线预览
截图
安装
yarn
yarn add react-pro-sidebar
npm
npm install react-pro-sidebar
使用
import { Sidebar, Menu, MenuItem, SubMenu } from 'react-pro-sidebar';
<Sidebar>
<Menu>
<SubMenu label="图表">
<MenuItem> 饼状图 </MenuItem>
<MenuItem> 折线图 </MenuItem>
</SubMenu>
<MenuItem> 文档 </MenuItem>
<MenuItem> 日历 </MenuItem>
</Menu>
</Sidebar>;
使用 React Router
你可以使用 component
属性集成 React Router 链接
使用示例
import { Sidebar, Menu, MenuItem } from 'react-pro-sidebar';
import { Link } from 'react-router-dom';
<Sidebar>
<Menu
menuItemStyles={{
button: {
// 当路由激活时,自动添加 active 类
// 因此我们可以使用它来设置激活菜单项的样式
[`&.active`]: {
backgroundColor: '#13395e',
color: '#b6c8d9',
},
},
}}
>
<MenuItem component={<Link to="/documentation" />}> 文档 </MenuItem>
<MenuItem component={<Link to="/calendar" />}> 日历 </MenuItem>
<MenuItem component={<Link to="/e-commerce" />}> 电子商务 </MenuItem>
</Menu>
</Sidebar>;
定制
我们为每个组件提供了 rootStyles
属性,可用于定制样式
建议使用实用类(sidebarClasses
, menuClasses
)来选择目标子节点
使用示例
<Sidebar
rootStyles={{
[`.${sidebarClasses.container}`]: {
backgroundColor: 'red',
},
}}
>
// ...
</Sidebar>
对于 Menu
组件,除了 rootStyles
之外,你还可以使用 menuItemStyles
属性来定制所有 MenuItem
和 SubMenu
组件及其子组件
类型定义
interface MenuItemStyles {
root?: ElementStyles;
button?: ElementStyles;
label?: ElementStyles;
prefix?: ElementStyles;
suffix?: ElementStyles;
icon?: ElementStyles;
subMenuContent?: ElementStyles;
SubMenuExpandIcon?: ElementStyles;
}
type ElementStyles = CSSObject | ((params: MenuItemStylesParams) => CSSObject | undefined);
使用示例
<Sidebar>
<Menu
menuItemStyles={{
button: ({ level, active, disabled }) => {
// 仅在树的第一层元素上应用样式
if (level === 0)
return {
color: disabled ? '#f5d9ff' : '#d359ff',
backgroundColor: active ? '#eecef9' : undefined,
};
},
}}
>
//...
</Menu>
</Sidebar>
API
组件 | 属性 | 类型 | 说明 | 默认值 |
---|---|---|---|---|
侧边栏(Sidebar) | defaultCollapsed | boolean | 初始状态是否折叠 | false |
collapsed | boolean | 侧边栏是否折叠 | false | |
toggled | boolean | 侧边栏是否切换 | false | |
width | number | string | 侧边栏宽度 | 270px | |
collapsedWidth | number | string | 折叠状态下的宽度 | 80px | |
backgroundColor | string | 设置侧边栏背景颜色 | rgb(249, 249, 249, 0.7) | |
image | string | 用于侧边栏背景的图像 URL,需要给背景颜色应用透明度 | - | |
breakPoint | xs | sm | md | lg | xl | xxl | all | 设置侧边栏应该触发响应式行为的断点 | - | |
customBreakPoint | string | 设置自定义断点值,这将覆盖 breakPoint 属性 | - | |
transitionDuration | number | 用于折叠和切换行为的过渡动画时长(毫秒) | 300 | |
rtl | boolean | RTL 方向 | false | |
rootStyles | CSSObject | 应用于侧边栏元素的样式 | - | |
onBackdropClick | () => void | 当点击遮罩层时调用的回调函数 | - | |
菜单(Menu) | closeOnClick | boolean | 如果为 true 且侧边栏处于折叠状态,则在单击 MenuItem 时子菜单 popper 将自动关闭 | false |
menuItemStyles | MenuItemStyles | 应用于 MenuItem 和 SubMenu 组件及其子组件的样式 | - | |
renderExpandIcon | (params: { level: number; collapsed: boolean; disabled: boolean; active: boolean; open: boolean; }) => React.ReactNode | 用于自定义子菜单展开图标的渲染方法 | - | |
transitionDuration | number | 用于滑动子菜单内容的过渡动画时长(毫秒) | 300 | |
rootStyles | CSSObject | 应用于 Menu 根元素的样式 | - | |
菜单项(MenuItem) | icon | ReactNode | 菜单项的图标 | - |
active | boolean | 如果为 true ,则该组件处于激活状态 | false | |
disabled | boolean | 如果为 true ,则该组件被禁用 | - | |
prefix | ReactNode | 为菜单项添加前缀 | - | |
suffix | ReactNode | 为菜单项添加后缀 | - | |
component | string | ReactElement | 用于菜单按钮节点的组件,可以是字符串(例如 'div')或组件 | - | |
rootStyles | CSSObject | 应用于 MenuItem 元素的样式 | - | |
子菜单(SubMenu) | label | string | ReactNode | 子菜单的标签 | - |
icon | ReactNode | 子菜单的图标 | - | |
defaultOpen | boolean | 设置子菜单是否默认打开 | false | |
open | boolean | 设置打开状态,如果要控制状态 | - | |
active | boolean | 如果为 true ,则该组件处于激活状态 | false | |
disabled | boolean | 如果为 true ,则该组件被禁用 | - | |
prefix | ReactNode | 为子菜单添加前缀 | - | |
suffix | ReactNode | 为子菜单添加后缀 | - | |
onOpenChange | (open: boolean) => void | 当子菜单状态改变时调用的回调函数 | - | |
component | string | React.ReactElement | 用于菜单按钮节点的组件,可以是字符串(例如 'div')或组件 | - | |
rootStyles | CSSObject | 应用于 SubMenu 元素的样式 | - |
License
MIT © Mohamed Azouaoui
麻省理工学院 © Mohamed Azouaoui