# 侧边栏
# 概念说明
提供侧边栏可供子页面跳转。
# 属性
组件通用属性请参见组件通用说明。
# 侧边栏
使用路由：设置是否根据vue-router来控制选择哪一项，默认关闭。开启后当前所在的侧边栏项底部会有标识，如下图所示。
选中值：当前选择的值。
值仅在不使用路由下支持编辑。
可折叠：设置分组是否可折叠。
手风琴模式：开启后每次仅会展开一个分组。
展开触发方式：支持整行点击均可触发和仅点击小箭头时触发两种方式。
只读：正常显示，但禁止选择或输入。
禁用：置灰显示，且禁止任何交互（焦点、点击、选择、输入等）。
# 侧边栏分组
- 可折叠：设置分组是否可折叠。
- 展开状态：设置分组的展开折叠状态。在某些场景下需要预置分组的展开或者折叠状态。
- 禁用展开/折叠：置灰显示，且禁止任何交互（焦点、点击、选择、输入等）。
# 侧边栏项
- 值：此项的值。
- 图标：支持从图标库选择图标或上传自定义图标。
- 禁用：置灰显示，且禁止任何交互（焦点、点击、选择、输入等）。
- 链接类型：支持页面跳转、下载链接。
- 链接地址：链接的详细地址。
- 链接打开方式：支持新窗口、当前窗口、父级窗口、顶级窗口四种方式，其中父级窗口和顶级窗口仅适用于iframe组件嵌套的情况，若不存在嵌套，则打开方式同当前窗口。
# 事件
# 侧边栏
# 组件事件
| 事件名 | 触发条件 |
|---|---|
| 选择后 | 选择某个侧边栏项时 |
# 侧边栏项
# 鼠标事件
| 事件名 | 触发条件 |
|---|---|
| 点击 | 鼠标左键单击对应组件 |
| 双击 | 鼠标左键双击对应组件 |
| 右键点击 | 鼠标右键单击对应组件 |
| 鼠标按下 | 鼠标任意键在组件区域内按下 |
| 鼠标释放 | 鼠标任意键在组件区域内释放 |
| 鼠标移入 | 鼠标指针移入组件区域 |
| 鼠标移出 | 鼠标指针移出组件区域 |
| 获取焦点 | 鼠标点中组件聚焦时 |
| 失去焦点 | 鼠标指针点击其他区域，组件失去焦点时 |
# 组件事件
| 事件名 | 触发条件 |
|---|---|
| 切换路由后 | 选择某个侧边栏项，路由跳转时 |
# 样式
样式说明请参见组件通用说明。
# 主题样式
- 项
- height：侧边栏项高度，如：1px。默认值为54px。
- padding-left：侧边栏项左边距,如：1px。默认值为30px。
- background：侧边栏项背景色，如：#223325。默认值为#ffffff。
- background-selected：侧边栏项选中背景色，如：#223325。默认值为rgba(51,126,255,0.12)
- background-disabled：侧边栏项禁用背景色，如：#223325。默认值为#ffffff。
- background-selected-disabled：侧边栏项禁用选中背景色，如：#223325。默认值为#337EFF。
- color：侧边栏项文字颜色，如：#223325。默认值为#333333。
- background-hover：侧边栏项背景色（hover状态），如：#223325。默认值为#ffffff。
- color-hover：侧边栏项文字颜色（hover状态），如：#223325。默认值为#337eff。
- color-selected：侧边栏项选中时文字颜色，如：#223325。默认值为#337eff。
- color-disabled：侧边栏项禁用文字颜色，如：#223325。默认值为#586475。
- border-right-width：侧边栏项右边框宽度，如：1px。默认值为4px。
- border-right-color：侧边栏项右边框颜色，如：#223325。默认值为#337EFF。
- border-bottom-width：侧边栏项下边框宽度，如：1px。默认值为0px。
- border-bottom-color：侧边栏项下边框颜色，如：#223325。默认值为#e5e5e5。
- icon-font-size：侧边栏项图标大小，如：1px。默认值为16px。
- icon-color：侧边栏项图标颜色，如：#223325。默认值为#ccc。
- icon-color-hover：侧边栏项图标颜色（hover状态），如：#223325。默认值为#ccc。
- icon-color-selected：侧边栏项图标颜色（选中状态），如：#223325。默认值为#ccc。
- 分组
- padding-left：侧边栏分组左边距，如：1px。默认值为10px。
- head-height：侧边栏分组头部高度，如：1px。默认值为52px。
- head-padding-left：侧边栏分组头部左边距，如：1px。默认值为20px。
- head-font-weight：侧边栏分组头部字重，如：1px。默认值为700。
- head-color：侧边栏分组头部字体颜色，如：#223325。默认值为#333333。
- head-color-hover：侧边栏分组头部字体颜色（hover状态），如：#223325。默认值为#337eff。
- head-background-hover：侧边栏分组头部背景色（hover状态），如：#223325。默认值为#f5f5f5。
- head-color-selected：侧边栏分组头部选中背景色，如：#223325。默认值为#337eff。
- head-border-bottom-width：侧边栏分组头部下边距宽度，如：1px。默认值为0px。
- head-border-bottom-color：侧边栏分组头部下边距颜色，如：#223325。默认值为#e5e5e5。
- 分隔符
- margin-y：侧边栏分隔符左外边距，如：1px。默认值为8px。
- height：侧边栏分隔符高度，如：1px。默认值为1px。
- background：侧边栏分隔符背景色，如：#223325。默认值为#3d4654。
- 其他
- background：侧边栏背景色，如：#223325。默认值为#ffffff。
# 内置事件
- toggleAll：展开所有侧边栏项。
# 示例图片
侧边栏组件支持基本用法、折叠功能、分组、手风琴模式四种折叠方式。
基本用法：初始配置展示侧边栏项。
折叠功能：初始配置展示侧边栏分组和侧边栏项，且支持折叠。
分组：初始配置展示侧边栏分组和侧边栏项。
手风琴模式：初始配置展示侧边栏分组和侧边栏项，支持折叠且每次仅展开一个分组。
