mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-05 21:49:09 +08:00
9.1 KiB
9.1 KiB
title | description | type | group | menuName | icon | order |
---|---|---|---|---|---|---|
Portlet 门户栏目 | 0 | ⚙ 组件 | Portlet | 60 |
门户栏目组件。
基本用法
{
"type": "page",
"data": {
"text": "这是一段描述信息"
},
"body": {
"type": "portlet",
"description": "${text}",
"tabs": [
{
"title": "标题",
"tab": "Content 1"
},
{
"title": "标题2",
"tab": "Content 2"
}
]
}
}
配置工具栏
{
"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 第一项的内容
{
"type": "portlet",
"hideHeader": true,
"tabs": [
{
"title": "Tab 1",
"tab": "Content 1"
}
]
}
设置 style
默认 tabs 只有一项的时候没有选中状态
{
"type": "portlet",
"style": {
"borderColor": '#333'
},
"tabs": [
{
"title": "Tab 1",
"tab": "Content 1"
}
]
}
去掉分隔线
{
"type": "portlet",
"divider": false,
"tabs": [
{
"title": "标题",
"tab": "Content 1"
}
]
}
source 动态数据
配置 source 属性,根据某个数据来动态生成。具体使用参考 Tabs 选项卡组件
图标
通过 icon 可以设置 tab 的图标,可以是 fontawesome 或 URL 地址。
{
"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
。
监听切换事件
{
"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 | tabs 中的工具栏,不随 tab 切换而变化 | |
style | string | Object |
自定义样式 | |
description | 模板 | 标题右侧信息 | |
hideHeader | boolean |
false | 隐藏头部 |
divider | boolean |
false | 去掉分隔线 |
tabs[x].title | string |
Tab 标题 | |
tabs[x].icon | icon |
Tab 的图标 | |
tabs[x].tab | SchemaNode | 内容区 | |
tabs[x].toolbar | 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 模式默认压缩标签 |