test/amis
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-11-30 19:08:45 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity
0ae04ce946
amis/docs/zh-CN/components/panel.md
吴多益 0ae04ce946
docs：将文档移动 zh-CN 目录下；为以后支持英文版做准备 (#1309) 
* docs：将文档移动 zh-CN 目录下；为以后支持英文版做准备

* 整理 autoFill

* 补充下载最新版本的说明 (#1298)

* fix: 修复在新版 Firefox 下 js sdk 报错 (#1300)

* 删掉可能报错的代码 (#1311)

* fix: 修复 css 变量不支持数字问题 (#1302)

* feat：增加 animation-duration，可以控制所有动画时长，也能用于一次性关闭所有动画效果 (#1303)

* feat：增加 animation-duration，可以控制所有动画时长，也能用于一次性关闭所有动画效果

* 补充文档

* Pageleave (#1310)

* form 添加页面离开提示功能

* 补充文档

Co-authored-by: 2betop <2betop.cn@gmail.com>
Co-authored-by: liaoxuezhi <liaoxuezhi@baidu.com>
2021-01-04 16:59:32 +08:00

3.3 KiB
Executable File
Raw Blame History

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> 按钮区域