slider-bar-nav

侧边导航

规则

• 组件规则

API

SliderBarNav

| 成员 | 说明 | 类型 | 默认值 | |---|---|---|---| |collapsed|是否收起导航栏|boolean|false| |width|导航宽度|number/string|auto| |className|自定义样式class|string|null| |openKeys|展开的菜单 key 数组，受控属性，需要配合 onOpen 事件使用|string[]|N/A| |defaultOpenKeys|默认状态下展开的 key 数组，仅在导航栏展开时有效|string[]|[]| |onOpen|当菜单被收缩或展开时触发的回调函数，仅在导航栏展开时有效|(keys: string[]) => void|默认不执行任何操作| |selectedKeys|选中的菜单 key 数组，受控属性，需要配合 onSelect 事件使用|string[]|N/A| |defaultSelectedKeys|默认状态下选中的 key 数组|string[]|[]| |onSelect|当被选择的菜单项发生变化时触发的回调函数|(selectedKeys: string[], navItem: SliderBarNav.Item) => void|默认不执行任何操作| |selectMode|菜单选择的模式，支持单选（"single"）和多选（"multiple"），默认为单选，空值则禁用选择功能|enum|"single"| |cascadeOpenKeys|openKeys 中包含子节点时，会自动展开父节点|boolean|false| |textIcon|为 true 时，若菜单内 Item 没有设置 icon 或 image，则默认取标题中的第一个字作为 icon。|boolean|false| |dataSource|可以使用数据的形式配置菜单内的内容，指向一个对象树，详见 Demo。对象树中的节点包含 key 属性（对应 Item 的 key），title 属性（对应 Item 或 Category 的 title），type 属性（可用值 category，link，不填表示该节点为普通 Item）。|object[]|默认为空| |itemOnClick|使用 dataSource 属性配置数据时，自定义节点点击事件。参数为被点击的 Item 对应的 dataSource 中的节点对象。|(node: object) => void|默认为空| |dataRenderCallback|允许在使用 dataSource 属性配置数据时，自定义 dataSource 的格式（非特殊需求，不推荐使用）|(node: object, extraProps: object) => ReactElement|默认行为见 dataSource 属性描述|

SliderBarNav.Category

| 成员 | 说明 | 类型 | 默认值 | |---|---|---|---| |title|该类别的标题，仅在导航栏展开时有效|string|N/A|

SliderBarNav.Item

| 成员 | 说明 | 类型 | 默认值 | |---|---|---|---| |key|用于唯一标识菜单项的标识符，对于有子菜单的菜单项必须设置|string|N/A| |title|菜单上显示的内容|ReactNode|N/A| |icon|菜单左侧显示的图标，仅在第一级菜单有效|string 或组件|N/A| |image|菜单左侧显示的图片 URI，仅在第一级菜单有效。当同时设置 icon 和 image 属性时，icon 属性无效。默认图片显示大小为 16x16 px。|string 或组件|N/A| |onClick|点击菜单项的回调|(e: Event) => void|默认不执行任何操作| |selected|当前的菜单项是否被选中, 优先级比 SliderBarNav 传入的 selectedKeys 要高|boolean|false| |selecteable|设置该菜单项是否可以被选中|boolean|默认为空| |textIcon|若菜单内 Item 没有设置 icon 或 image，则默认取标题中的第一个字作为 icon。该属性优先级高于 SliderBarNav 组件的 textIcon 属性，比如设置 SliderBarNav 组件 textIcon 属性为 true，但设置特定 Item 上的 textIcon 属性为 false，则会将该功能在相应 Item 上禁用。该属性还允许设置一个字符以自定义 icon 上显示的字符。|boolean|string|默认继承当前 SliderBarNav 组件的 textIcon 属性值|