2021-11-11 19:30:52 +08:00
|
|
|
|
---
|
|
|
|
|
title: Portlet 门户栏目
|
|
|
|
|
description:
|
|
|
|
|
type: 0
|
|
|
|
|
group: ⚙ 组件
|
|
|
|
|
menuName: Portlet
|
|
|
|
|
icon:
|
|
|
|
|
order: 60
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
门户栏目组件。
|
|
|
|
|
|
|
|
|
|
## 基本用法
|
|
|
|
|
|
|
|
|
|
```schema: scope="body"
|
|
|
|
|
{
|
|
|
|
|
"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"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2021-11-17 11:51:47 +08:00
|
|
|
|
## 隐藏头部
|
2021-11-11 19:30:52 +08:00
|
|
|
|
|
|
|
|
|
去掉头部,默认只展示内容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
|
|
|
|
|
|
|
|
|
|
## 属性表
|
|
|
|
|
|
|
|
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
|
|
|
| --------------------- | --------------------------------- | ----------------------------------- | ------------------------------------------------------------------------------------------ |
|
|
|
|
|
| type | `string` | `"portlet"` | 指定为 Portlet 渲染器 |
|
|
|
|
|
| className | `string` | | 外层 Dom 的类名 |
|
|
|
|
|
| tabsClassName | `string` | | Tabs Dom 的类名 |
|
|
|
|
|
| contentClassName | `string` | | Tabs content Dom 的类名 |
|
|
|
|
|
| tabs | `Array` | | tabs 内容 |
|
|
|
|
|
| source | `Object` | | tabs 关联数据,关联后可以重复生成选项卡 |
|
|
|
|
|
| toolbar | [SchemaNode](../types/schemanode) | | tabs 中的工具栏,不随tab切换而变化 |
|
|
|
|
|
| style | `string \| Object` | | 自定义样式|
|
|
|
|
|
| description | [模板](../../docs/concepts/template)| | 标题右侧信息 |
|
2021-11-17 11:51:47 +08:00
|
|
|
|
| hideHeader | `boolean` | false | 隐藏头部 |
|
2021-11-11 19:30:52 +08:00
|
|
|
|
| divider | `boolean` | false | 去掉分隔线 |
|
|
|
|
|
| tabs[x].title | `string` | | Tab 标题 |
|
|
|
|
|
| tabs[x].icon | `icon` | | Tab 的图标 |
|
|
|
|
|
| tabs[x].tab | [SchemaNode](../types/schemanode) | | 内容区 |
|
|
|
|
|
| tabs[x].toolbar | [SchemaNode](../types/schemanode) | | tabs 中的工具栏,随tab切换而变化
|
|
|
|
|
| tabs[x].reload | `boolean` | | 设置以后内容每次都会重新渲染,对于 crud 的重新拉取很有用 |
|
|
|
|
|
| tabs[x].unmountOnExit | `boolean` | | 每次退出都会销毁当前 tab 栏内容 |
|
|
|
|
|
| tabs[x].className | `string` | `"bg-white b-l b-r b-b wrapper-md"` | Tab 区域样式 |
|
|
|
|
|
| mountOnEnter | `boolean` | false | 只有在点中 tab 的时候才渲染 |
|
|
|
|
|
| unmountOnExit | `boolean` | false | 切换 tab 的时候销毁 |
|
|
|
|
|
| scrollable | `boolean` | false | 是否导航支持内容溢出滚动,`vertical`和`chrome`模式下不支持该属性;`chrome`模式默认压缩标签 |
|