mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-05 13:38:56 +08:00
54e56402d2
* 文档样式一点小优化 * 文档拆分组件部分
3.4 KiB
Executable File
3.4 KiB
Executable File
title | description | type | group | menuName | icon | order |
---|---|---|---|---|---|---|
Panel 面板 | 0 | ⚙ 组件 | Panel | 59 |
可以把相关信息以面板的形式展示到一块。
基本用法
{
"type": "panel",
"title": "面板标题",
"body": "面板内容"
}
底部配置按钮
可以通过配置actions
数组,实现渲染底部按钮栏
{
"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
,将底部部分贴在浏览器底部展示。
{
"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": "对,你刚点击了!"
}
}
]
}
属性表
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
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 | 标题 | |
header | SchemaNode | 头部容器 | |
body | SchemaNode | 内容容器 | |
footer | SchemaNode | 底部容器 | |
affixFooter | boolean |
是否固定底部容器 | |
actions | Array<Action> | 按钮区域 |