Template:Tabber：修订间差异

←上一编辑

可视化wikitext

2026年5月20日 (三) 08:33的最新版本

模板文档 TEMPLATE DOCUMENTATION [查看] [编辑] [历史] [刷新]

这个文档嵌入自Template:Tabber/doc。

说明

本模板用于封装 TabberNeue 扩展，生成选项卡组件。

参数列表

参数名	简介
Theme	内置主题样式：`green`、`red`、`blue`、`yellow`、`purple`、`orange`、`black`
style	应用于外层的额外 CSS 样式
DefaultTab	指定页面加载时显示第几个 tab，默认值为 `1`
LabelPadding	指定 label 的内边距
LabelBorderColor	指定选中的 label 的侧边框颜色
LabelBackgroundColor	指定选中的 label 的背景色
LabelColor	指定选中的 label 的顶边框颜色
TextBorderColor	指定显示的 text 的边框颜色
TextBackgroundColor	指定显示的 text 的背景色
TextPadding	指定显示的 text 的内边距
AutoWidth	使 tabs 不再占满整行，启用须传入 `yes`
Float	使 tabs 浮动，传入 `left` 或 `right`
LabelSide	标签位置，可选 `top`（默认）、`bottom`、`left`、`right`
LabelColorSideReverse	逆向设置标签顶边框位置，值为 `1`/`on`/`yes`/`true` 时启用
DividerSize	label 与 text 的间隔（正数，单位 px）
bt1, bt2, …	第 N 个标签的标注（从 1 开始连续编号）
tab1, tab2, …	第 N 个标签的内容（从 1 开始连续编号）

使用示例

{{tabber
| bt1 = 第一个标签 | tab1 = 第一个标签的内容
| bt2 = 第二个标签 | tab2 = 第二个标签的内容
| TextPadding = 16px 24px
| AutoWidth = yes
| LabelSide = left
}}

第一个标签的内容

第二个标签的内容

{{tabber
| bt1 = 第一个标签 | tab1 = 第一个标签的内容
| bt2 = 第二个标签 | tab2 = 第二个标签的内容
| TextPadding = 16px 24px
| AutoWidth = yes
}}

第一个标签的内容

第二个标签的内容

@@ 第1行： / 第1行： @@
-<noinclude>
+<includeonly><templatestyles src="Template:tabber/styles.css"/>{{#vardefine:i|1}}{{#vardefine:tabs|}}{{#while:|{{#if:{{{bt{{#var:i}}|}}}|true}}|{{#vardefine:tabs|{{#var:tabs}}{{#if:{{#var:tabs}}|{{!}}-{{!}}}}{{{bt{{#var:i}}}}}={{{tab{{#var:i}}|}}}}}{{#vardefine:i|{{#expr:{{#var:i}}+1}}}}}}{{#vardefine:sty|{{#if:{{{LabelPadding|}}}|--tpl-label-padding:{{{LabelPadding}}};}}{{#if:{{{LabelBorderColor|}}}|--tpl-label-border-color:{{{LabelBorderColor}}};}}{{#if:{{{LabelBackgroundColor|}}}|--tpl-label-bg:{{{LabelBackgroundColor}}};}}{{#if:{{{LabelColor|}}}|--tpl-label-color:{{{LabelColor}}};}}{{#if:{{{TextBorderColor|}}}|--tpl-text-border-color:{{{TextBorderColor}}};}}{{#if:{{{TextBackgroundColor|}}}|--tpl-text-bg:{{{TextBackgroundColor}}};}}{{#if:{{{TextPadding|}}}|--tpl-text-padding:{{{TextPadding}}};}}{{#if:{{{DividerSize|}}}|--tpl-divider-size:{{{DividerSize}}}px;}}{{#if:{{{style|}}}|{{{style|}}}}}}}{{#vardefine:wrapcls|tabber-wrap}}{{#ifeq:{{{Float|}}}|left|{{#vardefine:wrapcls|{{#var:wrapcls}} tabber-float-left}}|{{#ifeq:{{{Float|}}}|right|{{#vardefine:wrapcls|{{#var:wrapcls}} tabber-float-right}}|{{#ifeq:{{{AutoWidth|}}}|yes|{{#vardefine:wrapcls|{{#var:wrapcls}} tabber-autowidth}}}}}}}}{{#if:{{{LabelSide|}}}|{{#switch:{{{LabelSide|}}}|left={{#vardefine:wrapcls|{{#var:wrapcls}} tabber-side-left}}|right={{#vardefine:wrapcls|{{#var:wrapcls}} tabber-side-right}}|bottom={{#vardefine:wrapcls|{{#var:wrapcls}} tabber-side-bottom}}}}}}{{#vardefine:tabcls|tabber}}{{#if:{{{Theme|}}}|{{#vardefine:tabcls|{{#var:tabcls}} tabber--theme-{{{Theme|}}}}}}}{{#if:{{{LabelColorSideReverse|}}}|{{#switch:{{{LabelColorSideReverse|}}}|1|on|yes|true={{#vardefine:tabcls|{{#var:tabcls}} tabber--label-color-side-reverse}}|#default=}}}}<div class="{{#var:wrapcls}}"{{#if:{{#var:sty}}| style="{{#var:sty}}"}}>{{#tag:tabber|{{#var:tabs}}|class={{#var:tabcls}}|data-tabber-default-tab={{{DefaultTab|1}}}}}</div></includeonly><noinclude>{{doc}}</noinclude>
-== 说明 ==
-本模板用于封装 TabberNeue 扩展，生成选项卡组件。
-=== 参数列表 ===
-{| class="wikitable"
-|-
-! 参数名 !! 简介
-|-
-| Theme || 内置主题样式：<code>green</code>、<code>red</code>、<code>blue</code>、<code>yellow</code>、<code>purple</code>、<code>orange</code>、<code>black</code>
-|-
-| style || 应用于外层的额外 CSS 样式
-|-
-| DefaultTab || 指定页面加载时显示第几个 tab，默认值为 <code>1</code>
-|-
-| LabelPadding || 指定 label 的内边距
-|-
-| LabelBorderColor || 指定选中的 label 的侧边框颜色
-|-
-| LabelBackgroundColor || 指定选中的 label 的背景色
-|-
-| LabelColor || 指定选中的 label 的顶边框颜色
-|-
-| TextBorderColor || 指定显示的 text 的边框颜色
-|-
-| TextBackgroundColor || 指定显示的 text 的背景色
-|-
-| TextPadding || 指定显示的 text 的内边距
-|-
-| AutoWidth || 使 tabs 不再占满整行，启用须传入 <code>yes</code>
-|-
-| Float || 使 tabs 浮动，传入 <code>left</code> 或 <code>right</code>
-|-
-| LabelSide || 标签位置，可选 <code>top</code>（默认）、<code>bottom</code>、<code>left</code>、<code>right</code>
-|-
-| LabelColorSideReverse || 逆向设置标签顶边框位置，值为 <code>1</code>/<code>on</code>/<code>yes</code>/<code>true</code> 时启用
-|-
-| DividerSize || label 与 text 的间隔（正数，单位 px）
-|-
-| bt1, bt2, … || 第 N 个标签的标注（从 1 开始连续编号）
-|-
-| tab1, tab2, … || 第 N 个标签的内容（从 1 开始连续编号）
-|}
-=== 使用示例 ===
-<pre>
-{{tabber
-| bt1 = 第一个标签
-| tab1 = 第一个标签的内容
-| bt2 = 第二个标签
-| tab2 = 第二个标签的内容
-| Theme = blue
-| DefaultTab = 2
-}}
-</pre></noinclude><includeonly>{{#vardefine:i|1}}{{#vardefine:tabs|}}{{#while:|{{#if:{{{bt{{#var:i}}|}}}|true}}|{{#vardefine:tabs|{{#var:tabs}}{{#if:{{#var:tabs}}|{{!}}-{{!}}}}{{{bt{{#var:i}}}}}={{{tab{{#var:i}}|}}}}}{{#vardefine:i|{{#expr:{{#var:i}}+1}}}}}}{{#tag:tabber|{{#var:tabs}}|class=tabber{{#if:{{{Theme|}}}| tabber--theme-{{{Theme|}}}}}{{#ifeq:{{{Float|}}}|left| tabber--float-left|{{#ifeq:{{{Float|}}}|right| tabber--float-right|{{#ifeq:{{{AutoWidth|}}}|yes| tabber--auto-width}}}}}}{{#if:{{{LabelSide|}}}|{{#switch:{{{LabelSide|}}}|bottom= tabber--side-bottom|left= tabber--side-left|right= tabber--side-right}}}}{{#if:{{{LabelColorSideReverse|}}}|{{#switch:{{{LabelColorSideReverse|}}}|1|on|yes|true= tabber--label-color-side-reverse|#default=}}}}\|style={{#if:{{{DefaultTab|}}}|--tabber-default-tab:{{{DefaultTab|}}};}}{{#if:{{{LabelPadding|}}}|--tabber-label-padding:{{{LabelPadding|}}};}}{{#if:{{{LabelBorderColor|}}}|--tabber-label-border-color:{{{LabelBorderColor|}}};}}{{#if:{{{LabelBackgroundColor|}}}|--tabber-label-background-color:{{{LabelBackgroundColor|}}};}}{{#if:{{{LabelColor|}}}|--tabber-label-color:{{{LabelColor|}}};}}{{#if:{{{TextBorderColor|}}}|--tabber-text-border-color:{{{TextBorderColor|}}};}}{{#if:{{{TextBackgroundColor|}}}|--tabber-text-background-color:{{{TextBackgroundColor|}}};}}{{#if:{{{TextPadding|}}}|--tabber-text-padding:{{{TextPadding|}}};}}{{#if:{{{DividerSize|}}}|--tabber-divider-size:{{{DividerSize|}}}px;}}{{#if:{{{style|}}}|{{{style|}}}}}}}</includeonly>