chore(doc): add docs for message & tabs Hexo tag helpers
ppoffice
parent
e8f7f1dda5
commit
d0e04fd2c1
|
|
@ -0,0 +1,417 @@
|
|||
title: Custom Hexo Tag Helpers
|
||||
date: 2018-01-02
|
||||
tags:
|
||||
- Demo
|
||||
toc: true
|
||||
---
|
||||
|
||||
Apart from the tag helpers supported by Hexo natively, as described in {% post_link demo/Hexo-Built-In-Tag-Helpers %},
|
||||
Icarus also offers several other useful tag helpers to customize the display of your content.
|
||||
|
||||
<article class="message message-immersive is-primary">
|
||||
<div class="message-body">
|
||||
<i class="fas fa-globe-asia mr-2"></i>This article is also available in
|
||||
<a href="{% post_path zh-CN/Custom-Hexo-Tag-Helpers %}">简体中文</a>.
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- more -->
|
||||
|
||||
<article class="message message-immersive is-primary">
|
||||
<div class="message-body">
|
||||
<i class="fas fa-info-circle mr-2"></i>The following tag helpers are provided by
|
||||
<a href="https://github.com/ppoffice/hexo-component-inferno">ppoffice/hexo-component-inferno</a>.
|
||||
Please refer to it for a complete list of supported helpers and their configuration details.
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<style>
|
||||
.example-tab-container {
|
||||
margin: 0 0 20px 0;
|
||||
padding: 10px 20px 20px 20px;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 0.5em 0.75em -0.125em rgba(10,10,10,0.1), 0 0px 0 1px rgba(10,10,10,0.02);
|
||||
}
|
||||
</style>
|
||||
|
||||
## Message
|
||||
|
||||
Message blocks are a colorful way to emphasize part of text in your post.
|
||||
Its syntax is defined as follows:
|
||||
|
||||
```
|
||||
{% message color:<color> size:<size> icon:<icon> title:<title> %}
|
||||
<content>
|
||||
{% endmessage %}
|
||||
```
|
||||
|
||||
### color
|
||||
|
||||
The color of message block.
|
||||
It is optional.
|
||||
Available values and their examples are:
|
||||
|
||||
{% message "title:default" %}
|
||||
A message block when `color` is not specified.
|
||||
{% endmessage %}
|
||||
|
||||
{% message color:dark "title:dark" %}
|
||||
A `dark` message block.
|
||||
{% endmessage %}
|
||||
|
||||
{% message color:primary "title:primary" %}
|
||||
A `primary` message block.
|
||||
{% endmessage %}
|
||||
|
||||
{% message color:info "title:info" %}
|
||||
A `info` message block.
|
||||
{% endmessage %}
|
||||
|
||||
{% message color:success "title:success" %}
|
||||
A `success` message block.
|
||||
{% endmessage %}
|
||||
|
||||
{% message color:warning "title:warning" %}
|
||||
A `warning` message block.
|
||||
{% endmessage %}
|
||||
|
||||
{% message color:danger "title:danger" %}
|
||||
A `danger` message block.
|
||||
{% endmessage %}
|
||||
|
||||
### size
|
||||
|
||||
The size of message block.
|
||||
It is optional.
|
||||
Available values and their examples are:
|
||||
|
||||
{% message size:small "title:small" %}
|
||||
A `small` message block.
|
||||
{% endmessage %}
|
||||
|
||||
{% message "title:default" %}
|
||||
A message block when `size` is not specified.
|
||||
{% endmessage %}
|
||||
|
||||
{% message size:medium "title:medium" %}
|
||||
A `medium` message block.
|
||||
{% endmessage %}
|
||||
|
||||
{% message size:large "title:large" %}
|
||||
A `large` message block.
|
||||
{% endmessage %}
|
||||
|
||||
### icon
|
||||
|
||||
The icon shown in the message block header.
|
||||
It is optional.
|
||||
The value should be valid FontAwesome icon class name.
|
||||
If the icon class name contains space(s), this option and its value should be wrapped with quotes.
|
||||
|
||||
{% message "icon:fa-brands fa-github" "title:Message block with a GitHub icon" %}
|
||||
A message with `"icon:fa-brands fa-github"` as icon.
|
||||
{% endmessage %}
|
||||
|
||||
{% message color:success "icon:fa-brands fa-node-js" "title:Message block with a Node.js icon" %}
|
||||
A message with `"icon:fa-brands fa-node-js"` as icon.
|
||||
{% endmessage %}
|
||||
|
||||
{% message color:danger "icon:fa-brands fa-npm" "title:Message block with an NPM icon" %}
|
||||
A message with `"icon:fa-brands fa-npm"` as icon.
|
||||
{% endmessage %}
|
||||
|
||||
### title
|
||||
|
||||
Title of the message block.
|
||||
It is optional.
|
||||
If the title contains space(s), this option and its value should be wrapped with quotes.
|
||||
|
||||
{% message "title:Message block with title" %}
|
||||
A message block with a title (`"title:Message block with title"`).
|
||||
{% endmessage %}
|
||||
|
||||
{% message %}
|
||||
A message block without a title.
|
||||
{% endmessage %}
|
||||
|
||||
{% message color:dark %}
|
||||
A message block without a title.
|
||||
{% endmessage %}
|
||||
|
||||
{% message color:primary %}
|
||||
A message block without a title.
|
||||
{% endmessage %}
|
||||
|
||||
{% message color:info %}
|
||||
A message block without a title.
|
||||
{% endmessage %}
|
||||
|
||||
{% message color:success %}
|
||||
A message block without a title.
|
||||
{% endmessage %}
|
||||
|
||||
{% message color:warning %}
|
||||
A message block without a title.
|
||||
{% endmessage %}
|
||||
|
||||
{% message color:danger %}
|
||||
A message block without a title.
|
||||
{% endmessage %}
|
||||
|
||||
## Tabs
|
||||
|
||||
The tabs tag helper is a powerful tool to display parallel content.
|
||||
Only content in the active tab can be displayed to the user at a time.
|
||||
Its syntax is defined as follows:
|
||||
|
||||
```
|
||||
{% tabs size:<size> align:<align> style:<style> %}
|
||||
<!-- tab id:<tab_id> icon:<icon> title:<tab_title> active -->
|
||||
<content>
|
||||
<!-- endtab -->
|
||||
<!-- tab id:<tab_id> icon:<icon> title:<tab_title> -->
|
||||
<content>
|
||||
<!-- endtab -->
|
||||
...
|
||||
{% endtabs %}
|
||||
```
|
||||
|
||||
### Tab Container
|
||||
|
||||
A tab container has the following options:
|
||||
|
||||
#### size
|
||||
|
||||
Size of the tabs.
|
||||
It is optional.
|
||||
Available values and their examples are:
|
||||
|
||||
<div class="example-tab-container">
|
||||
{% tabs size:small %}
|
||||
<!-- tab id:tab_size_small_1 "title:Tab 1" active -->
|
||||
This is tab 1 of a `small` tab container.
|
||||
<!-- endtab -->
|
||||
<!-- tab id:tab_size_small_2 "title:Tab 2" -->
|
||||
This is tab 2 of a `small` tab container.
|
||||
<!-- endtab -->
|
||||
{% endtabs %}
|
||||
</div>
|
||||
|
||||
<div class="example-tab-container">
|
||||
{% tabs %}
|
||||
<!-- tab id:tab_size_default_1 "title:Tab 1" active -->
|
||||
This is tab 1 of a tab container when `size` is not specified.
|
||||
<!-- endtab -->
|
||||
<!-- tab id:tab_size_default_2 "title:Tab 2" -->
|
||||
This is tab 2 of a tab container when `size` is not specified.
|
||||
<!-- endtab -->
|
||||
{% endtabs %}
|
||||
</div>
|
||||
|
||||
<div class="example-tab-container">
|
||||
{% tabs size:medium %}
|
||||
<!-- tab id:tab_size_medium_1 "title:Tab 1" active -->
|
||||
This is tab 1 of a `medium` tab container.
|
||||
<!-- endtab -->
|
||||
<!-- tab id:tab_size_medium_2 "title:Tab 2" -->
|
||||
This is tab 2 of a `medium` tab container.
|
||||
<!-- endtab -->
|
||||
{% endtabs %}
|
||||
</div>
|
||||
|
||||
<div class="example-tab-container">
|
||||
{% tabs size:large %}
|
||||
<!-- tab id:tab_size_large_1 "title:Tab 1" active -->
|
||||
This is tab 1 of a `large` tab container.
|
||||
<!-- endtab -->
|
||||
<!-- tab id:tab_size_large_2 "title:Tab 2" -->
|
||||
This is tab 2 of a `large` tab container.
|
||||
<!-- endtab -->
|
||||
{% endtabs %}
|
||||
</div>
|
||||
|
||||
#### align
|
||||
|
||||
Alignment of the tab buttons.
|
||||
It is optional.
|
||||
Available values and their examples are:
|
||||
|
||||
<div class="example-tab-container">
|
||||
{% tabs %}
|
||||
<!-- tab id:tab_align_default_1 "title:Tab 1" active -->
|
||||
This is tab 1 of a tab container when `align` is not specified.
|
||||
<!-- endtab -->
|
||||
<!-- tab id:tab_align_default_2 "title:Tab 2" -->
|
||||
This is tab 2 of a tab container when `align` is not specified.
|
||||
<!-- endtab -->
|
||||
{% endtabs %}
|
||||
</div>
|
||||
|
||||
<div class="example-tab-container">
|
||||
{% tabs align:centered %}
|
||||
<!-- tab id:tab_align_centered_1 "title:Tab 1" active -->
|
||||
This is tab 1 of a `centered` tab container.
|
||||
<!-- endtab -->
|
||||
<!-- tab id:tab_align_centered_2 "title:Tab 2" -->
|
||||
This is tab 2 of a `centered` tab container.
|
||||
<!-- endtab -->
|
||||
{% endtabs %}
|
||||
</div>
|
||||
|
||||
<div class="example-tab-container">
|
||||
{% tabs align:right %}
|
||||
<!-- tab id:tab_align_right_1 "title:Tab 1" active -->
|
||||
This is tab 1 of a `right` tab container.
|
||||
<!-- endtab -->
|
||||
<!-- tab id:tab_align_right_2 "title:Tab 2" -->
|
||||
This is tab 2 of a `right` tab container.
|
||||
<!-- endtab -->
|
||||
{% endtabs %}
|
||||
</div>
|
||||
|
||||
<div class="example-tab-container">
|
||||
{% tabs align:fullwidth %}
|
||||
<!-- tab id:tab_align_fullwidth_1 "title:Tab 1" active -->
|
||||
This is tab 1 of a `fullwidth` tab container.
|
||||
<!-- endtab -->
|
||||
<!-- tab id:tab_align_fullwidth_2 "title:Tab 2" -->
|
||||
This is tab 2 of a `fullwidth` tab container.
|
||||
<!-- endtab -->
|
||||
{% endtabs %}
|
||||
</div>
|
||||
|
||||
#### style
|
||||
|
||||
Style of the tab buttons.
|
||||
It is optional.
|
||||
Additionally, you can combine the style with `fullwidth` alignment.
|
||||
Available values and their examples are:
|
||||
|
||||
<div class="example-tab-container">
|
||||
{% tabs style:boxed %}
|
||||
<!-- tab id:tab_style_boxed_1 "title:Tab 1" active -->
|
||||
This is tab 1 of a `boxed` tab container.
|
||||
<!-- endtab -->
|
||||
<!-- tab id:tab_style_boxed_2 "title:Tab 2" -->
|
||||
This is tab 2 of a `boxed` tab container.
|
||||
<!-- endtab -->
|
||||
{% endtabs %}
|
||||
</div>
|
||||
|
||||
<div class="example-tab-container">
|
||||
{% tabs style:toggle %}
|
||||
<!-- tab id:tab_style_toggle_1 "title:Tab 1" active -->
|
||||
This is tab 1 of a `toggle` tab container.
|
||||
<!-- endtab -->
|
||||
<!-- tab id:tab_style_toggle_2 "title:Tab 2" -->
|
||||
This is tab 2 of a `toggle` tab container.
|
||||
<!-- endtab -->
|
||||
{% endtabs %}
|
||||
</div>
|
||||
|
||||
<div class="example-tab-container">
|
||||
{% tabs style:toggle-rounded %}
|
||||
<!-- tab id:tab_style_toggle_rounded_1 "title:Tab 1" active -->
|
||||
This is tab 1 of a `toggle-rounded` tab container.
|
||||
<!-- endtab -->
|
||||
<!-- tab id:tab_style_toggle_rounded_2 "title:Tab 2" -->
|
||||
This is tab 2 of a `toggle-rounded` tab container.
|
||||
<!-- endtab -->
|
||||
{% endtabs %}
|
||||
</div>
|
||||
|
||||
<div class="example-tab-container">
|
||||
{% tabs align:fullwidth style:boxed %}
|
||||
<!-- tab id:tab_style_boxed_fullwidth_1 "title:Tab 1" active -->
|
||||
This is tab 1 of a `fullwidth` `boxed` tab container.
|
||||
<!-- endtab -->
|
||||
<!-- tab id:tab_style_boxed_fullwidth_2 "title:Tab 2" -->
|
||||
This is tab 2 of a `fullwidth` `boxed` tab container.
|
||||
<!-- endtab -->
|
||||
{% endtabs %}
|
||||
</div>
|
||||
|
||||
<div class="example-tab-container">
|
||||
{% tabs align:fullwidth style:toggle %}
|
||||
<!-- tab id:tab_style_toggle_fullwidth_1 "title:Tab 1" active -->
|
||||
This is tab 1 of a `fullwidth` `toggle` tab container.
|
||||
<!-- endtab -->
|
||||
<!-- tab id:tab_style_toggle_fullwidth_2 "title:Tab 2" -->
|
||||
This is tab 2 of a `fullwidth` `toggle` tab container.
|
||||
<!-- endtab -->
|
||||
{% endtabs %}
|
||||
</div>
|
||||
|
||||
<div class="example-tab-container">
|
||||
{% tabs align:fullwidth style:toggle-rounded %}
|
||||
<!-- tab id:tab_style_toggle_rounded_fullwidth_1 "title:Tab 1" active -->
|
||||
This is tab 1 of a `fullwidth` `toggle-rounded` tab container.
|
||||
<!-- endtab -->
|
||||
<!-- tab id:tab_style_toggle_rounded_fullwidth_2 "title:Tab 2" -->
|
||||
This is tab 2 of a `fullwidth` `toggle-rounded` tab container.
|
||||
<!-- endtab -->
|
||||
{% endtabs %}
|
||||
</div>
|
||||
|
||||
### Tab
|
||||
|
||||
A tab has the following options:
|
||||
|
||||
#### id
|
||||
|
||||
The unique identifier of the tab element.
|
||||
It is required.
|
||||
An ID of a tab should be unique across the entire page so that Icarus can location the right tab
|
||||
content to show or hide.
|
||||
|
||||
#### active
|
||||
|
||||
Whether the current tab element is shown.
|
||||
It is optional.
|
||||
Only one tab can be active at a time for a tab group.
|
||||
|
||||
#### icon
|
||||
|
||||
The icon shown in the tab button.
|
||||
It is optional.
|
||||
The value should be valid FontAwesome icon class name.
|
||||
If the icon class name contains space(s), this option and its value should be wrapped with quotes.
|
||||
|
||||
<div class="example-tab-container">
|
||||
{% tabs %}
|
||||
<!-- tab id:tab_icon_1 "icon:fa-brands fa-github" "title:GitHub" active -->
|
||||
This tab has an icon of `"icon:fa-brands fa-github"`.
|
||||
<!-- endtab -->
|
||||
<!-- tab id:tab_icon_2 "icon:fa-brands fa-node-js" "title:Node.js" -->
|
||||
This tab has an icon of `"icon:fa-brands fa-node-js"`.
|
||||
<!-- endtab -->
|
||||
{% endtabs %}
|
||||
</div>
|
||||
|
||||
<div class="example-tab-container">
|
||||
{% tabs align:fullwidth style:toggle-rounded %}
|
||||
<!-- tab id:tab_boxed_icon_1 "icon:fa-brands fa-github" "title:GitHub" active -->
|
||||
This tab has an icon of `"icon:fa-brands fa-github"`.
|
||||
<!-- endtab -->
|
||||
<!-- tab id:tab_boxed_icon_2 "icon:fa-brands fa-node-js" "title:Node.js" -->
|
||||
This tab has an icon of `"icon:fa-brands fa-node-js"`.
|
||||
<!-- endtab -->
|
||||
{% endtabs %}
|
||||
</div>
|
||||
|
||||
#### title
|
||||
|
||||
Title of the tab button.
|
||||
It is required.
|
||||
If the title contains space(s), this option and its value should be wrapped with quotes.
|
||||
|
||||
<div class="example-tab-container">
|
||||
{% tabs style:toggle %}
|
||||
<!-- tab id:tab_title_boxed_1 "title:Tab with title" active -->
|
||||
This tab has a title (`"title:Tab with title"`).
|
||||
<!-- endtab -->
|
||||
<!-- tab id:tab_title_boxed_2 "title:Tab also with title" -->
|
||||
This tab also has a title (`"title:Tab also with title"`).
|
||||
<!-- endtab -->
|
||||
{% endtabs %}
|
||||
</div>
|
||||
|
|
@ -0,0 +1,418 @@
|
|||
title: 自定义Hexo标签插件
|
||||
date: 2018-01-02
|
||||
tags:
|
||||
- Demo
|
||||
language: zh-CN
|
||||
toc: true
|
||||
providers:
|
||||
cdn: loli
|
||||
fontcdn: loli
|
||||
iconcdn: loli
|
||||
---
|
||||
|
||||
除了{% post_link demo/Hexo-Built-In-Tag-Helpers %}中描述的Hexo原生支持的标签插件以外，Icarus也提供其他
|
||||
几个用来定制内容显示的有用的标签插件。
|
||||
|
||||
<article class="message message-immersive is-primary">
|
||||
<div class="message-body">
|
||||
<i class="fas fa-globe-americas mr-2"></i>本文同时提供以下语言的翻译：<a href="{% post_path en/Custom-Hexo-Tag-Helpers %}">English</a>。
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- more -->
|
||||
|
||||
<article class="message message-immersive is-primary">
|
||||
<div class="message-body">
|
||||
<i class="fas fa-info-circle mr-2"></i>下面的标签插件由<a href="https://github.com/ppoffice/hexo-component-inferno">ppoffice/hexo-component-inferno</a>提供，完整的支持插件列表和配置详情以其为准。
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<style>
|
||||
.example-tab-container {
|
||||
margin: 0 0 20px 0;
|
||||
padding: 10px 20px 20px 20px;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 0.5em 0.75em -0.125em rgba(10,10,10,0.1), 0 0px 0 1px rgba(10,10,10,0.02);
|
||||
}
|
||||
</style>
|
||||
|
||||
## 消息
|
||||
|
||||
五颜六色的消息块可以用来强调你文章中的部分文本。
|
||||
它的语法定义如下：
|
||||
|
||||
```
|
||||
{% message color:<颜色> size:<大小> icon:<图标> title:<标题> %}
|
||||
<内容>
|
||||
{% endmessage %}
|
||||
```
|
||||
|
||||
### color
|
||||
|
||||
此选项定义消息块的颜色。
|
||||
其为可选项。
|
||||
它可用的配置值与示例如下：
|
||||
|
||||
{% message "title:default" %}
|
||||
一个没有设置颜色的代码块。
|
||||
{% endmessage %}
|
||||
|
||||
{% message color:dark "title:dark" %}
|
||||
一个深色(`dark`)的代码块。
|
||||
{% endmessage %}
|
||||
|
||||
{% message color:primary "title:primary" %}
|
||||
一个主题色(`primary`)的代码块。
|
||||
{% endmessage %}
|
||||
|
||||
{% message color:info "title:info" %}
|
||||
一个提示色(`info`)的代码块。
|
||||
{% endmessage %}
|
||||
|
||||
{% message color:success "title:success" %}
|
||||
一个成功色(`success`)的代码块。
|
||||
{% endmessage %}
|
||||
|
||||
{% message color:warning "title:warning" %}
|
||||
一个警示色(`warning`)的代码块。
|
||||
{% endmessage %}
|
||||
|
||||
{% message color:danger "title:danger" %}
|
||||
一个危险色(`danger`)的代码块。
|
||||
{% endmessage %}
|
||||
|
||||
### size
|
||||
|
||||
此选项定义消息块的大小。
|
||||
其为可选项。
|
||||
它可用的配置值与示例如下：
|
||||
|
||||
{% message size:small "title:small" %}
|
||||
一个小(`small`)的代码块。
|
||||
{% endmessage %}
|
||||
|
||||
{% message "title:default" %}
|
||||
一个没有设置大小的代码块。
|
||||
{% endmessage %}
|
||||
|
||||
{% message size:medium "title:medium" %}
|
||||
一个中等大小(`small`)的代码块。
|
||||
{% endmessage %}
|
||||
|
||||
{% message size:large "title:large" %}
|
||||
一个大(`small`)的代码块。
|
||||
{% endmessage %}
|
||||
|
||||
### icon
|
||||
|
||||
此选项定义显示在消息块头部的图标。
|
||||
其为可选项。
|
||||
它的值应为FontAwesome的图标class name。
|
||||
如果图标的class name含有空格，则配置名与配置值需要用引号包裹住。
|
||||
|
||||
{% message "icon:fa-brands fa-github" "title:一个有着GitHub图标的消息块" %}
|
||||
一个有着GitHub图标(`"icon:fa-brands fa-github"`)的消息块。
|
||||
{% endmessage %}
|
||||
|
||||
{% message color:success "icon:fa-brands fa-node-js" "title:一个有着Node.js图标的消息块" %}
|
||||
一个有着Node.js图标(`"icon:fa-brands fa-node-js"`)的消息块。
|
||||
{% endmessage %}
|
||||
|
||||
{% message color:danger "icon:fa-brands fa-npm" "title:一个有着NPM图标的消息块" %}
|
||||
一个有着NPM图标(`"icon:fa-brands fa-npm"`)的消息块。
|
||||
{% endmessage %}
|
||||
|
||||
### title
|
||||
|
||||
此选项定义消息块的标题。
|
||||
其为可选项。
|
||||
如果标题含有空格，则配置名与配置值需要用引号包裹住。
|
||||
|
||||
{% message "title:有标题的消息块" %}
|
||||
有标题的消息块(`"title:有标题的消息块"`)。
|
||||
{% endmessage %}
|
||||
|
||||
{% message %}
|
||||
没有标题的消息块。
|
||||
{% endmessage %}
|
||||
|
||||
{% message color:dark %}
|
||||
没有标题的消息块。
|
||||
{% endmessage %}
|
||||
|
||||
{% message color:primary %}
|
||||
没有标题的消息块。
|
||||
{% endmessage %}
|
||||
|
||||
{% message color:info %}
|
||||
没有标题的消息块。
|
||||
{% endmessage %}
|
||||
|
||||
{% message color:success %}
|
||||
没有标题的消息块。
|
||||
{% endmessage %}
|
||||
|
||||
{% message color:warning %}
|
||||
没有标题的消息块。
|
||||
{% endmessage %}
|
||||
|
||||
{% message color:danger %}
|
||||
没有标题的消息块。
|
||||
{% endmessage %}
|
||||
|
||||
## 标签页
|
||||
|
||||
标签页是一个功能强大的用于展示平行内容的标签插件。
|
||||
同一时间内，只有活动的标签页内容才能展示给用户。
|
||||
它的语法定义如下：
|
||||
|
||||
```
|
||||
{% tabs size:<大小> align:<对齐> style:<样式> %}
|
||||
<!-- tab id:<标签ID> icon:<图标> title:<标签标题> active -->
|
||||
<标签内容>
|
||||
<!-- endtab -->
|
||||
<!-- tab id:<标签ID> icon:<图标> title:<标签标题> -->
|
||||
<标签内容>
|
||||
<!-- endtab -->
|
||||
...
|
||||
{% endtabs %}
|
||||
```
|
||||
|
||||
### 标签容器
|
||||
|
||||
一个标签容器有着以下选项：
|
||||
|
||||
#### size
|
||||
|
||||
此选项定义标签页的大小。
|
||||
其为可选项。
|
||||
它可用的配置值与示例如下：
|
||||
|
||||
<div class="example-tab-container">
|
||||
{% tabs size:small %}
|
||||
<!-- tab id:tab_size_small_1 "title:第一页" active -->
|
||||
这是一个小(`small`)标签页容器的第一页。
|
||||
<!-- endtab -->
|
||||
<!-- tab id:tab_size_small_2 "title:第二页" -->
|
||||
这是一个小(`small`)标签页容器的第二页。
|
||||
<!-- endtab -->
|
||||
{% endtabs %}
|
||||
</div>
|
||||
|
||||
<div class="example-tab-container">
|
||||
{% tabs %}
|
||||
<!-- tab id:tab_size_default_1 "title:第一页" active -->
|
||||
这是一个没有指定大小的标签页容器的第一页。
|
||||
<!-- endtab -->
|
||||
<!-- tab id:tab_size_default_2 "title:第二页" -->
|
||||
这是一个没有指定大小的标签页容器的第二页。
|
||||
<!-- endtab -->
|
||||
{% endtabs %}
|
||||
</div>
|
||||
|
||||
<div class="example-tab-container">
|
||||
{% tabs size:medium %}
|
||||
<!-- tab id:tab_size_medium_1 "title:第一页" active -->
|
||||
这是一个中等大小(`medium`)标签页容器的第一页。
|
||||
<!-- endtab -->
|
||||
<!-- tab id:tab_size_medium_2 "title:第二页" -->
|
||||
这是一个中等大小(`medium`)标签页容器的第一页。
|
||||
<!-- endtab -->
|
||||
{% endtabs %}
|
||||
</div>
|
||||
|
||||
<div class="example-tab-container">
|
||||
{% tabs size:large %}
|
||||
<!-- tab id:tab_size_large_1 "title:第一页" active -->
|
||||
这是一个大(`large`)标签页容器的第一页。
|
||||
<!-- endtab -->
|
||||
<!-- tab id:tab_size_large_2 "title:第二页" -->
|
||||
这是一个大(`large`)标签页容器的第二页。
|
||||
<!-- endtab -->
|
||||
{% endtabs %}
|
||||
</div>
|
||||
|
||||
#### align
|
||||
|
||||
此选项定义标签页按钮的对齐方式。
|
||||
其为可选项。
|
||||
它可用的配置值与示例如下：
|
||||
|
||||
<div class="example-tab-container">
|
||||
{% tabs %}
|
||||
<!-- tab id:tab_align_default_1 "title:第一页" active -->
|
||||
这是一个没有指定对齐方式的标签页容器的第一页。
|
||||
<!-- endtab -->
|
||||
<!-- tab id:tab_align_default_2 "title:第二页" -->
|
||||
这是一个没有指定对齐方式的标签页容器的第二页。
|
||||
<!-- endtab -->
|
||||
{% endtabs %}
|
||||
</div>
|
||||
|
||||
<div class="example-tab-container">
|
||||
{% tabs align:centered %}
|
||||
<!-- tab id:tab_align_centered_1 "title:第一页" active -->
|
||||
这是一个居中对齐的(`centered`)标签页容器的第一页。
|
||||
<!-- endtab -->
|
||||
<!-- tab id:tab_align_centered_2 "title:第二页" -->
|
||||
这是一个居中对齐的(`centered`)标签页容器的第二页。
|
||||
<!-- endtab -->
|
||||
{% endtabs %}
|
||||
</div>
|
||||
|
||||
<div class="example-tab-container">
|
||||
{% tabs align:right %}
|
||||
<!-- tab id:tab_align_right_1 "title:第一页" active -->
|
||||
这是一个右对齐的(`centered`)标签页容器的第一页。
|
||||
<!-- endtab -->
|
||||
<!-- tab id:tab_align_right_2 "title:第二页" -->
|
||||
这是一个右对齐的(`centered`)标签页容器的第二页。
|
||||
<!-- endtab -->
|
||||
{% endtabs %}
|
||||
</div>
|
||||
|
||||
<div class="example-tab-container">
|
||||
{% tabs align:fullwidth %}
|
||||
<!-- tab id:tab_align_fullwidth_1 "title:第一页" active -->
|
||||
这是一个全宽的(`fullwidth`)标签页容器的第一页。
|
||||
<!-- endtab -->
|
||||
<!-- tab id:tab_align_fullwidth_2 "title:第二页" -->
|
||||
这是一个全宽的(`fullwidth`)标签页容器的第二页。
|
||||
<!-- endtab -->
|
||||
{% endtabs %}
|
||||
</div>
|
||||
|
||||
#### style
|
||||
|
||||
此选项定义标签页按钮的样式。
|
||||
其为可选项。
|
||||
此外你可以将样式与全宽(`fullwidth`)对齐方式结合。
|
||||
它可用的配置值与示例如下：
|
||||
|
||||
<div class="example-tab-container">
|
||||
{% tabs style:boxed %}
|
||||
<!-- tab id:tab_style_boxed_1 "title:第一页" active -->
|
||||
这是一个盒状(`boxed`)标签页容器的第一页。
|
||||
<!-- endtab -->
|
||||
<!-- tab id:tab_style_boxed_2 "title:第二页" -->
|
||||
这是一个盒状(`boxed`)标签页容器的第二页。
|
||||
<!-- endtab -->
|
||||
{% endtabs %}
|
||||
</div>
|
||||
|
||||
<div class="example-tab-container">
|
||||
{% tabs style:toggle %}
|
||||
<!-- tab id:tab_style_toggle_1 "title:第一页" active -->
|
||||
这是一个拨动开关状(`toggle`)标签页容器的第一页。
|
||||
<!-- endtab -->
|
||||
<!-- tab id:tab_style_toggle_2 "title:第二页" -->
|
||||
这是一个拨动开关状(`toggle`)标签页容器的第二页。
|
||||
<!-- endtab -->
|
||||
{% endtabs %}
|
||||
</div>
|
||||
|
||||
<div class="example-tab-container">
|
||||
{% tabs style:toggle-rounded %}
|
||||
<!-- tab id:tab_style_toggle_rounded_1 "title:第一页" active -->
|
||||
这是一个圆角拨动开关状(`toggle-rounded`)标签页容器的第一页。
|
||||
<!-- endtab -->
|
||||
<!-- tab id:tab_style_toggle_rounded_2 "title:第二页" -->
|
||||
这是一个圆角拨动开关状(`toggle-rounded`)标签页容器的第二页。
|
||||
<!-- endtab -->
|
||||
{% endtabs %}
|
||||
</div>
|
||||
|
||||
<div class="example-tab-container">
|
||||
{% tabs align:fullwidth style:boxed %}
|
||||
<!-- tab id:tab_style_boxed_fullwidth_1 "title:第一页" active -->
|
||||
这是一个全宽(`fullwidth`)盒状(`boxed`)标签页容器的第一页。
|
||||
<!-- endtab -->
|
||||
<!-- tab id:tab_style_boxed_fullwidth_2 "title:第二页" -->
|
||||
这是一个全宽(`fullwidth`)盒状(`boxed`)标签页容器的第二页。
|
||||
<!-- endtab -->
|
||||
{% endtabs %}
|
||||
</div>
|
||||
|
||||
<div class="example-tab-container">
|
||||
{% tabs align:fullwidth style:toggle %}
|
||||
<!-- tab id:tab_style_toggle_fullwidth_1 "title:第一页" active -->
|
||||
这是一个全宽(`fullwidth`)拨动开关状(`toggle`)标签页容器的第一页。
|
||||
<!-- endtab -->
|
||||
<!-- tab id:tab_style_toggle_fullwidth_2 "title:第二页" -->
|
||||
这是一个全宽(`fullwidth`)拨动开关状(`toggle`)标签页容器的第二页。
|
||||
<!-- endtab -->
|
||||
{% endtabs %}
|
||||
</div>
|
||||
|
||||
<div class="example-tab-container">
|
||||
{% tabs align:fullwidth style:toggle-rounded %}
|
||||
<!-- tab id:tab_style_toggle_rounded_fullwidth_1 "title:第一页" active -->
|
||||
这是一个全宽(`fullwidth`)圆角拨动开关状(`toggle-rounded`)标签页容器的第一页。
|
||||
<!-- endtab -->
|
||||
<!-- tab id:tab_style_toggle_rounded_fullwidth_2 "title:第二页" -->
|
||||
这是一个全宽(`fullwidth`)圆角拨动开关状(`toggle-rounded`)标签页容器的第二页。
|
||||
<!-- endtab -->
|
||||
{% endtabs %}
|
||||
</div>
|
||||
|
||||
### Tab
|
||||
|
||||
一个标签页有如下选项：
|
||||
|
||||
#### id
|
||||
|
||||
此选项为标签页元素的独特标识符(ID)。
|
||||
此项为必填项。
|
||||
一个标签页ID应当在整个页面内为独一无二的，这样Icarus才能定位、显示、和隐藏正确的标签页内容。
|
||||
|
||||
#### active
|
||||
|
||||
此选项标记当前的标签页是否默认显示。
|
||||
此项为选填项。
|
||||
同一时刻一个标签组中只有一个标签页可以标记为活动(`active`)标签页。
|
||||
|
||||
#### icon
|
||||
|
||||
此选项定义标签按钮中显示的图标。
|
||||
此项为选填项。
|
||||
它的值应为FontAwesome图标的class name。
|
||||
如果图标的class name含有空格，则配置名与配置值需要用引号包裹住。
|
||||
|
||||
<div class="example-tab-container">
|
||||
{% tabs %}
|
||||
<!-- tab id:tab_icon_1 "icon:fa-brands fa-github" "title:GitHub" active -->
|
||||
这个标签页的图标(`icon`)为`"icon:fa-brands fa-github"`。
|
||||
<!-- endtab -->
|
||||
<!-- tab id:tab_icon_2 "icon:fa-brands fa-node-js" "title:Node.js" -->
|
||||
这个标签页的图标(`icon`)为`"icon:fa-brands fa-node-js"`。
|
||||
<!-- endtab -->
|
||||
{% endtabs %}
|
||||
</div>
|
||||
|
||||
<div class="example-tab-container">
|
||||
{% tabs align:fullwidth style:toggle-rounded %}
|
||||
<!-- tab id:tab_boxed_icon_1 "icon:fa-brands fa-github" "title:GitHub" active -->
|
||||
这个标签页的图标(`icon`)为`"icon:fa-brands fa-github"`。
|
||||
<!-- endtab -->
|
||||
<!-- tab id:tab_boxed_icon_2 "icon:fa-brands fa-node-js" "title:Node.js" -->
|
||||
这个标签页的图标(`icon`)为`"icon:fa-brands fa-node-js"`。
|
||||
<!-- endtab -->
|
||||
{% endtabs %}
|
||||
</div>
|
||||
|
||||
#### title
|
||||
|
||||
此选项定义标签按钮的标题。
|
||||
其为可选项。
|
||||
如果标题含有空格，则配置名与配置值需要用引号包裹住。
|
||||
|
||||
<div class="example-tab-container">
|
||||
{% tabs style:toggle %}
|
||||
<!-- tab id:tab_title_boxed_1 "title:有标题的标签页" active -->
|
||||
这个标签页的标题(`title`)为(`"title:有标题的标签页"`)。
|
||||
<!-- endtab -->
|
||||
<!-- tab id:tab_title_boxed_2 "title:另一个有标题的标签页" -->
|
||||
这个标签页的标题(`title`)为(`"title:另一个有标题的标签页"`)。
|
||||
<!-- endtab -->
|
||||
{% endtabs %}
|
||||
</div>
|
||||
Loading…
Reference in New Issue