amis/docs/components/tabs.md

title	description	type	group	menuName	icon	order
Tabs 选项卡		0	⚙ 组件	Tabs		68

基本用法

{
    "type": "tabs",
    "tabs": [
        {
            "title": "Tab 1",
            "tab": "Content 1"
        },

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

展示模式

线型

{
    "type": "tabs",
    "mode": "line",
    "tabs": [
        {
            "title": "选项卡1",
            "body": "选项卡内容1"
        },
        {
            "title": "选项卡2",
            "body": "选项卡内容2"
        },
        {
            "title": "选项卡3",
            "body": "选项卡内容3"
        }
    ]
}

卡片模式

{
    "type": "tabs",
    "mode": "card",
    "tabs": [
        {
            "title": "选项卡1",
            "body": "选项卡内容1"
        },
        {
            "title": "选项卡2",
            "body": "选项卡内容2"
        },
        {
            "title": "选项卡3",
            "body": "选项卡内容3"
        }
    ]
}

选择器型

{
    "type": "tabs",
    "mode": "radio",
    "tabs": [
        {
            "title": "选项卡1",
            "body": "选项卡内容1"
        },
        {
            "title": "选项卡2",
            "body": "选项卡内容2"
        },
        {
            "title": "选项卡3",
            "body": "选项卡内容3"
        }
    ]
}

配置顶部工具栏

配置toolbar实现顶部工具栏。

{
    "type": "tabs",
    "toolbar": [
        {
            "type": "button",
            "label": "按钮",
            "actionType": "dialog",
            "dialog": {
                "title": "弹窗标题",
                "body": "你点击了"
            }
        }
    ],
    "tabs": [
        {
            "title": "Tab 1",
            "tab": "Content 1"
        },

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

配置hash

可以在单个tab下，配置hash属性，支持地址栏#xxx。

{
    "type": "tabs",
    "tabs": [
        {
            "title": "Tab 1",
            "hash": "tab1",
            "tab": "Content 1"
        },

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

默认显示某个选项卡

主要配置activeKey属性来实现该效果，共有下面两种方法：

配置hash值

{
    "type": "tabs",
    "activeKey": "tab2",
    "tabs": [
        {
            "title": "Tab 1",
            "hash": "tab1",
            "tab": "Content 1"
        },

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

配置索引值

单个tab上不要配置hash属性，配置需要展示的tab索引值，0代表第一个。

{
    "type": "tabs",
    "activeKey": 1,
    "tabs": [
        {
            "title": "Tab 1",
            "tab": "Content 1"
        },

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

unmountOnExit

如果你想在切换tab时，自动销毁掉隐藏的tab，请配置"unmountOnExit": true

属性表

属性名	类型	默认值	说明
type	string	"tabs"	指定为 Tabs 渲染器
className	string		外层 Dom 的类名
tabsClassName	string		Tabs Dom 的类名
tabs	Array		tabs 内容
toolbar	Container		tabs 中的工具栏
toolbarClassName	string		tabs 中工具栏的类名
tabs[x].title	string		Tab 标题
tabs[x].icon	icon		Tab 的图标
tabs[x].tab	Container		内容区
tabs[x].hash	string		设置以后将跟 url 的 hash 对应
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 区域样式