标签语法 {#标签语法}
|-------------------|-------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5
| {% tabs Unique name, [index] %} <!-- tab [Tab caption] [@icon] --> Any content (support inline tags too). <!-- endtab --> {% endtabs %}
|
配置参数 {#配置参数}
Unique name
: {#Unique-name}
- 选项卡块标签的唯一名称,不带逗号。
- 将在#id中用作每个标签及其索引号的前缀。
- 如果名称中包含空格,则对于生成#id,所有空格将由破折号代替。
- 仅当前帖子/页面的URL必须是唯一的!
[index]
: {#index}
- 活动选项卡的索引号。
- 如果未指定,将选择第一个标签(1)。
- 如果index为-1,则不会选择任何选项卡。
- 可选参数。
[Tab caption]
: {#Tab-caption}
- 当前选项卡的标题。
- 如果未指定标题,则带有制表符索引后缀的唯一名称将用作制表符的标题。
- 如果未指定标题,但指定了图标,则标题将为空。
- 可选参数。
[@icon]
: {#icon}
- FontAwesome图标名称(全名,看起来像" fas fa-font")
- 可以指定带空格或不带空格;
- 例如'Tab caption @icon' 和 'Tab caption@icon'.
- 可选参数。
示例代码 {#示例代码}
Demo 1 - 预设选择第一个【默认】 {#Demo-1-预设选择第一个【默认】}
|---------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13
| {% tabs test1 %} <!-- tab --> **This is Tab 1.** <!-- endtab --> <!-- tab --> **This is Tab 2.** <!-- endtab --> <!-- tab --> **This is Tab 3.** <!-- endtab --> {% endtabs %}
|
- test1 1
- test1 2
- test1 3
This is Tab 1.
This is Tab 2.
This is Tab 3.
Demo 2 - 预设选择tabs {#Demo-2-预设选择tabs}
|---------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13
| {% tabs test2, 3 %} <!-- tab --> **This is Tab 1.** <!-- endtab --> <!-- tab --> **This is Tab 2.** <!-- endtab --> <!-- tab --> **This is Tab 3.** <!-- endtab --> {% endtabs %}
|
- test2 1
- test2 2
- test2 3
This is Tab 1.
This is Tab 2.
This is Tab 3.
Demo 3 - 没有预设值 {#Demo-3-没有预设值}
|---------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13
| {% tabs test3, -1 %} <!-- tab --> **This is Tab 1.** <!-- endtab --> <!-- tab --> **This is Tab 2.** <!-- endtab --> <!-- tab --> **This is Tab 3.** <!-- endtab --> {% endtabs %}
|
- test3 1
- test3 2
- test3 3
This is Tab 1.
This is Tab 2.
This is Tab 3.
Demo 4 - 自定义 Tab 名 + 只有 icon + icon 和 Tab 名 {#Demo-4-自定义-Tab-名-只有-icon-icon-和-Tab-名}
|---------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13
| {% tabs test4 %} <!-- tab 第一个Tab --> **tab名字为第一个Tab** <!-- endtab --> <!-- tab @fab fa-apple-pay --> **只有图标 没有Tab名字** <!-- endtab --> <!-- tab 炸弹@fas fa-bomb --> **名字+icon** <!-- endtab --> {% endtabs %}
|
- 第一个Tab
- 炸弹
tab名字为第一个Tab
只有图标 没有Tab名字
名字+icon