bricks/docs/cn/widgets/tab.md
2024-05-11 17:58:28 +08:00

2.7 KiB

tab

此函数用于创建tab组件

用法

<html>

<head>
	<link rel="stylesheet" href="/bricks/css/bricks.css">
</head>

<body>
	<script src="/bricks/bricks.js"></script>
	<script>
		const opts =
		{
			"widget": {
				"widgettype": "TabPanel",
				"options": {
					"tab_wide": "auto",
					"height": "100%",
					"tab_long": "70%",
					"tab_pos": "top",
					"items": [
						{
							"name": "c",
							"label": "C",
							"content": {
								"widgettype": "Text",
								"options": {
									"text": "This is a C language documents"
								}
							},
							"icon": null
						},
						{
							"name": "javascript",
							"removable": true,
							"label": "JavaScript",
							"content": {
								"widgettype": "Text",
								"options": {
									"text": "This is JavaScript language documents"
								}
							},
							"icon": null
						},
						{
							"name": "php",
							"label": "PHP",
							"content": {
								"widgettype": "Text",
								"options": {
									"text": "This is PHP language documents"
								}
							},
							"icon": null
						},
						{
							"name": "python",
							"label": "Python",
							"content": {
								"widgettype": "Text",
								"options": {
									"text": "This is Python language documents"
								}
							},
							"icon": null
						},
					]
				}
			}
		};
		const app = new BricksApp(opts);
		app.run();
	</script>
</body>

</html>

示例

本地png图片

widget.options参数说明

参数 说明 类型 可选值 默认值
tab_wide 尺寸 string auto auto
height string ---- ----
tab_long string ---- ----
tab_pos 位置 string top/bottom/left/right -----

options.items参数说明

一个items为一个tab项

参数 说明 类型 可选值 默认值
name 与选项卡绑定值 value 对应的标识符,表示选项卡别名 string ---- ----
label 选项卡标题 string ---- ----
removable 是否移除选项卡 boolean ---- false
content 选项卡的内容

事件

none