Panel 面板
一个内容面板, 支持折叠面板。Panel 中可以放所有 Data Display
组件,可以作为表单的容器。
<Panel>
面板<PanelGroup>
面板组
获取组件
import { Panel, PanelGroup } from 'rsuite';
演示
默认
带线框
有阴影
没有标题
卡片
卡片组
可折叠
撑满容器
面板组
折叠面板组
手风琴效果
每次只能展开一个面板
Props
<Panel>
属性名称 | 类型(默认值) |
描述 |
---|---|---|
bodyFill | boolean | 内容区域撑满容器 |
bordered | boolean | 显示线框 |
shaded | boolean | 显示阴影 |
classPrefix | string ('panel') |
组件 CSS 类的前缀 |
collapsible | boolean | 可折叠的 |
defaultExpanded | boolean | 默认展开 |
eventKey | any | 面板对应的事件 key |
expanded | boolean | 展开面板 |
header | React.Node | 头部显示信息 |
id | string or number | ID |
<PanelGroup>
属性名称 | 类型(默认值) |
描述 |
---|---|---|
accordion | boolean | 可折叠的面板 |
activeKey | any | 展开的面板,对应 <Panel> 的 eventKey |
classPrefix | string | 组件 CSS 类的前缀 |
defaultActiveKey | any | 默认展开面板 |
onSelect | (eventKey: any, event: SyntheticEvent) => void | 切换展开面板的回调函数 |