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 提供了一组用于创建高级和可定制侧边导航的组件

旧版本

v0.x

在线预览

截图

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

<table> <thead> <tr> <th>组件</th> <th>属性</th> <th>类型</th> <th>说明</th> <th>默认值</th> </tr> </thead> <tbody> <tr> <td rowspan=13>侧边栏（Sidebar）</td> <td>defaultCollapsed</td> <td><code>boolean</code></td> <td>初始状态是否折叠</td> <td><code>false</code></td> </tr> <tr> <td>collapsed</td> <td><code>boolean</code></td> <td>侧边栏是否折叠</td> <td><code>false</code></td> </tr> <tr> <td>toggled</td> <td><code>boolean</code></td> <td>侧边栏是否切换</td> <td><code>false</code></td> </tr> <tr> <td>width</td> <td><code>number | string</code></td> <td>侧边栏宽度</td> <td><code>270px</code></td> </tr> <tr> <td>collapsedWidth</td> <td><code>number | string</code></td> <td>折叠状态下的宽度</td> <td><code>80px</code></td> </tr> <tr> <td>backgroundColor</td> <td><code>string</code></td> <td>设置侧边栏背景颜色</td> <td><code>rgb(249, 249, 249, 0.7)</code></td> </tr> <tr> <td>image</td> <td><code>string</code></td> <td>用于侧边栏背景的图像 URL，需要给背景颜色应用透明度</td> <td>-</td> </tr> <tr> <td>breakPoint</td> <td><code>xs</code> | <code>sm</code> | <code>md</code> | <code>lg</code> | <code>xl</code> | <code>xxl</code> | <code>all</code></td> <td>设置侧边栏应该触发响应式行为的断点</td> <td>-</td> </tr> <tr> <td>customBreakPoint</td> <td><code>string</code></td> <td>设置自定义断点值，这将覆盖 breakPoint 属性</td> <td>-</td> </tr> <tr> <td>transitionDuration</td> <td><code>number</code></td> <td>用于折叠和切换行为的过渡动画时长（毫秒）</td> <td><code>300</code></td> </tr> <tr> <td>rtl</td> <td><code>boolean</code></td> <td>RTL 方向</td> <td><code>false</code></td> </tr> <tr> <td>rootStyles</td> <td><code>CSSObject</code></td> <td>应用于侧边栏元素的样式</td> <td>-</td> </tr> <tr> <td>onBackdropClick</td> <td><code>() => void</code></td> <td>当点击遮罩层时调用的回调函数</td> <td>-</td> </tr> <tr> <td rowspan=5>菜单（Menu）</td> <td>closeOnClick</td> <td><code>boolean</code></td> <td>如果为 <code>true</code> 且侧边栏处于折叠状态，则在单击 MenuItem 时子菜单 popper 将自动关闭</td> <td><code>false</code></td> </tr> <tr> <td>menuItemStyles</td> <td><code>MenuItemStyles</code></td> <td>应用于 MenuItem 和 SubMenu 组件及其子组件的样式</td> <td>-</td> </tr> <tr> <td>renderExpandIcon</td> <td><code>(params: { level: number; collapsed: boolean; disabled: boolean; active: boolean; open: boolean; }) => React.ReactNode</code></td> <td>用于自定义子菜单展开图标的渲染方法</td> <td>-</td> </tr> <tr> <td>transitionDuration</td> <td><code>number</code></td> <td>用于滑动子菜单内容的过渡动画时长（毫秒）</td> <td><code>300</code></td> </tr> <tr> <td>rootStyles</td> <td><code>CSSObject</code></td> <td>应用于 Menu 根元素的样式</td> <td>-</td> </tr> <tr> <td rowspan=7>菜单项（MenuItem）</td> <td>icon</td> <td><code>ReactNode</code></td> <td>菜单项的图标</td> <td>-</td> </tr> <tr> <td>active</td> <td><code>boolean</code></td> <td>如果为 <code>true</code>，则该组件处于激活状态</td> <td><code>false</code></td> </tr> <tr> <td>disabled</td> <td><code>boolean</code></td> <td>如果为 <code>true</code>，则该组件被禁用</td> <td>-</td> </tr> <tr> <td>prefix</td> <td><code>ReactNode</code></td> <td>为菜单项添加前缀</td> <td>-</td> </tr> <tr> <td>suffix</td> <td><code>ReactNode</code></td> <td>为菜单项添加后缀</td> <td>-</td> </tr> <tr> <td>component</td> <td><code>string | ReactElement</code></td> <td>用于菜单按钮节点的组件，可以是字符串（例如 'div'）或组件</td> <td>-</td> </tr> <tr> <td>rootStyles</td> <td><code>CSSObject</code></td> <td>应用于 MenuItem 元素的样式</td> <td>-</td> </tr> <tr> <td rowspan=11>子菜单（SubMenu）</td> <td>label</td> <td><code>string | ReactNode</code></td> <td>子菜单的标签</td> <td>-</td> </tr> <tr> <td>icon</td> <td><code>ReactNode</code></td> <td>子菜单的图标</td> <td>-</td> </tr> <tr> <td>defaultOpen</td> <td><code>boolean</code></td> <td>设置子菜单是否默认打开</td> <td><code>false</code></td> </tr> <tr> <td>open</td> <td><code>boolean</code></td> <td>设置打开状态，如果要控制状态</td> <td>-</td> </tr> <tr> <td>active</td> <td><code>boolean</code></td> <td>如果为 <code>true</code>，则该组件处于激活状态</td> <td><code>false</code></td> </tr> <tr> <td>disabled</td> <td><code>boolean</code></td> <td>如果为 <code>true</code>，则该组件被禁用</td> <td>-</td> </tr> <tr> <td>prefix</td> <td><code>ReactNode</code></td> <td>为子菜单添加前缀</td> <td>-</td> </tr> <tr> <td>suffix</td> <td><code>ReactNode</code></td> <td>为子菜单添加后缀</td> <td>-</td> </tr> <tr> <td>onOpenChange</td> <td><code>(open: boolean) => void</code></td> <td>当子菜单状态改变时调用的回调函数</td> <td>-</td> </tr> <tr> <td>component</td> <td><code>string | React.ReactElement</code></td> <td>用于菜单按钮节点的组件，可以是字符串（例如 'div'）或组件</td> <td>-</td> </tr> <tr> <td>rootStyles</td> <td><code>CSSObject</code></td> <td>应用于 SubMenu 元素的样式</td> <td>-</td> </tr> </tbody> </table>