Portlet 门户栏目

Portlet 门户栏目

门户栏目组件。

基本用法

{
    "type": "page",
    "data": {
        "text": "这是一段描述信息"
    },
    "body": {
        "type": "portlet",
        "description": "${text}",
        "tabs": [
            {
                "title": "标题",
                "tab": "Content 1"
            },
            {
                "title": "标题2",
                "tab": "Content 2"
            }
        ]
    }
}

配置工具栏

```schema: scope=”body” { “type”: “portlet”, “toolbar”: [ { “label”: “固定操作”, “type”: “button”, “actionType”: “ajax”, “api”: “https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm“ } ], “tabs”: [ { “title”: “Tab 1”, “tab”: “Content 1”, “toolbar”: [ { “label”: “ajax请求”, “type”: “button”, “actionType”: “ajax”, “api”: “https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm“ }, { “type”: “dropdown-button”, “level”: “link”, “icon”: “fa fa-ellipsis-h”, “hideCaret”: true, “buttons”: [ { “type”: “button”, “label”: “编辑”, “actionType”: “dialog”, “dialog”: { “title”: “编辑”, “body”: “你正在编辑该卡片” } }, { “type”: “button”, “label”: “删除”, “actionType”: “dialog”, “dialog”: { “title”: “提示”, “body”: “你删掉了该卡片” } } ] } ] }, { “title”: “Tab 2”, “tab”: “Content 2”, “toolbar”: [ { “type”: “button”, “level”: “link”, “url”: “https://www.baidu.com“, “actionType”: “url”, “size”: “sm”, “label”: “跳转2” } ] } ] }

## 隐藏头部
去掉头部，默认只展示内容 tab 第一项的内容
```schema: scope="body"
{
    "type": "portlet",
    "hideHeader": true,
    "tabs": [
        {
            "title": "Tab 1",
            "tab": "Content 1"
        }
    ]
}

设置 style

默认 tabs 只有一项的时候没有选中状态

```schema: scope=”body” { “type”: “portlet”, “style”: { “borderColor”: ‘#333’ }, “tabs”: [ { “title”: “Tab 1”, “tab”: “Content 1” } ] }

## 去掉分隔线
```schema: scope="body"
{
    "type": "portlet",
    "divider": false,
    "tabs": [
        {
            "title": "标题",
            "tab": "Content 1"
        }
    ]
}

source 动态数据

配置 source 属性,根据某个数据来动态生成。具体使用参考 Tabs 选项卡组件

图标

通过 icon 可以设置 tab 的图标，可以是 fontawesome 或 URL 地址。

```schema: scope=”body” { “type”: “portlet”, “tabs”: [ { “title”: “Tab 1”, “tab”: “Content 1”, “icon”: “https://suda.cdn.bcebos.com/images%2F2021-01%2Fdiamond.svg“ },

    {
        "title": "Tab 2",
        "tab": "Content 2"
    }
]

}

## mountOnEnter
只有在点击卡片的时候才会渲染，在内容较多的时候可以提升性能，但第一次点击的时候会有卡顿。
## unmountOnExit
如果你想在切换 tab 时，自动销毁掉隐藏的 tab，请配置`"unmountOnExit": true`。
## 监听切换事件
```schema: scope="body"
{
    "type": "portlet",
    "activeKey": 1,
    "onSelect": "alert(key)",
    "tabs": [
      {
        "title": "Tab 1",
        "tab": "Content 1"
      },
      {
        "title": "Tab 2",
        "tab": "Content 2"
      }
    ]
  }

会传递 key 参数和 props

属性表