2020-07-28 10:03:53 +08:00
|
|
|
---
|
|
|
|
|
title: Panel 面板
|
2020-07-29 16:20:21 +08:00
|
|
|
description:
|
2020-07-28 10:03:53 +08:00
|
|
|
type: 0
|
|
|
|
|
group: ⚙ 组件
|
|
|
|
|
menuName: Panel
|
2020-07-29 16:20:21 +08:00
|
|
|
icon:
|
2020-07-28 10:03:53 +08:00
|
|
|
order: 59
|
|
|
|
|
---
|
2020-07-29 16:20:21 +08:00
|
|
|
|
2020-07-28 10:03:53 +08:00
|
|
|
可以把相关信息以面板的形式展示到一块。
|
|
|
|
|
|
|
|
|
|
## 基本用法
|
|
|
|
|
|
|
|
|
|
```schema:height="200" scope="body"
|
|
|
|
|
{
|
|
|
|
|
"type": "panel",
|
|
|
|
|
"title": "面板标题",
|
|
|
|
|
"body": "面板内容"
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## 底部配置按钮
|
|
|
|
|
|
|
|
|
|
可以通过配置`actions`数组，实现渲染底部按钮栏
|
|
|
|
|
|
|
|
|
|
```schema:height="200" scope="body"
|
|
|
|
|
{
|
|
|
|
|
"type": "panel",
|
|
|
|
|
"title": "面板标题",
|
|
|
|
|
"body": "面板内容",
|
|
|
|
|
"actions": [
|
|
|
|
|
{
|
|
|
|
|
"type": "button",
|
|
|
|
|
"label": "按钮 1",
|
|
|
|
|
"actionType": "dialog",
|
|
|
|
|
"dialog": {
|
|
|
|
|
"title": "提示",
|
|
|
|
|
"body": "对，你刚点击了！"
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
{
|
|
|
|
|
"type": "button",
|
|
|
|
|
"label": "按钮 2",
|
|
|
|
|
"actionType": "dialog",
|
|
|
|
|
"dialog": {
|
|
|
|
|
"title": "提示",
|
|
|
|
|
"body": "对，你刚点击了！"
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## 固定底部
|
|
|
|
|
|
|
|
|
|
有时 panel 内，内容过多，导致底部操作按钮不是很方便，可以配置`"affixFooter": true`，将底部部分贴在浏览器底部展示。
|
|
|
|
|
|
|
|
|
|
```schema:height="200" scope="body"
|
|
|
|
|
{
|
|
|
|
|
"type": "panel",
|
|
|
|
|
"title": "面板标题",
|
|
|
|
|
"body": "面板内容",
|
|
|
|
|
"affixFooter": true,
|
|
|
|
|
"actions": [
|
|
|
|
|
{
|
|
|
|
|
"type": "button",
|
|
|
|
|
"label": "按钮 1",
|
|
|
|
|
"actionType": "dialog",
|
|
|
|
|
"dialog": {
|
|
|
|
|
"title": "提示",
|
|
|
|
|
"body": "对，你刚点击了！"
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
{
|
|
|
|
|
"type": "button",
|
|
|
|
|
"label": "按钮 2",
|
|
|
|
|
"actionType": "dialog",
|
|
|
|
|
"dialog": {
|
|
|
|
|
"title": "提示",
|
|
|
|
|
"body": "对，你刚点击了！"
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## 属性表
|
|
|
|
|
|
2020-07-29 16:20:21 +08:00
|
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
|
|
|
| ---------------- | --------------------------------- | -------------------------------------- | ------------------- |
|
|
|
|
|
| type | `string` | `"panel"` | 指定为 Panel 渲染器 |
|
|
|
|
|
| className | `string` | `"panel-default"` | 外层 Dom 的类名 |
|
|
|
|
|
| headerClassName | `string` | `"panel-heading"` | header 区域的类名 |
|
|
|
|
|
| footerClassName | `string` | `"panel-footer bg-light lter wrapper"` | footer 区域的类名 |
|
|
|
|
|
| actionsClassName | `string` | `"panel-footer"` | actions 区域的类名 |
|
|
|
|
|
| bodyClassName | `string` | `"panel-body"` | body 区域的类名 |
|
|
|
|
|
| title | [SchemaNode](../types/schemanode) | | 标题 |
|
|
|
|
|
| header | [SchemaNode](../types/schemanode) | | 头部容器 |
|
|
|
|
|
| body | [SchemaNode](../types/schemanode) | | 内容容器 |
|
|
|
|
|
| footer | [SchemaNode](../types/schemanode) | | 底部容器 |
|
|
|
|
|
| affixFooter | `boolean` | | 是否固定底部容器 |
|
|
|
|
|
| actions | Array<[Action](./action)> | | 按钮区域 |
|
