mirror of
https://github.com/NetEase/tango.git
synced 2026-09-17 16:38:46 +08:00
39 lines
1.0 KiB
Plaintext
39 lines
1.0 KiB
Plaintext
# SidebarPanel 侧边栏面板
|
|
|
|
侧边栏面板提供了一个简单易用的主操作面板，可以将一些高频操作和核心部件放置到侧边栏面板中，方便用户快速操作。
|
|
|
|
## 属性列表
|
|
|
|
import TypesTable from '@site/src/components/TypesTable';
|
|
|
|
<TypesTable name="SidebarPanelProps" />
|
|
|
|
## 创建浮动面板
|
|
|
|
借助 `isFloat` 和 `width` 属性可以创建浮动自定义宽度面板，脱离框架对侧边栏的宽度限制。
|
|
|
|
```jsx
|
|
<SidebarPanel.Item key="history" isFloat width="40vw" />
|
|
```
|
|
|
|
## 徽标提示
|
|
|
|
`showBadge` 属性可以设置工具栏是否显示徽标提示，用于某些面板需要对外展现需要被用户注意的时机。
|
|
|
|
<img
|
|
alt="img"
|
|
src="https://p6.music.126.net/obj/wonDlsKUwrLClGjCm8Kx/18224398190/2847/b86d/df55/c817e86a0b1b3a6b08f7cc98362caec5.png"
|
|
width="300px"
|
|
/>
|
|
|
|
```jsx
|
|
<SidebarPanel.Item
|
|
key="info"
|
|
label="消息"
|
|
title="消息列表"
|
|
icon={<NotificationOutlined />}
|
|
showBadge={{ count: 2 }}>
|
|
<Box>info panel</Box>
|
|
</SidebarPanel.Item>
|
|
```
|