使用者:北方珈音/Template:Tabs/moe/doc
歡迎您協助測試本模板。如果在使用過程中出現問題,你可以在模板討論頁提出。
更符合萌百風格的Tabs選項卡模板。
在{{tabs/core}}的基礎上進行了定製化:調整了配色,並添加了適量動畫。
總體上可以直接替換{{tabs}}或{{tabs/core}},個別參數不支持,並有一些獨有的參數。
| ||||||||||||||||||||||
參數列表
模板僅支持{{Tabs/core}}中的部分參數,如要實現較複雜的樣式請使用{{Tabs/core}}。
- 參數區分大小寫;
- 加粗為必需的參數;
- 綠色背景為本模板獨有的參數。
| 參數名 | 描述 | 缺省值 |
|---|---|---|
| labeln (或btn)(註)兼容Template:Tabs和Template:Tabs/core的寫法,bt[n]對應tab[n],label[n]對應text[n],兩組不能混用 |
第n個選項卡的標籤,n為從1開始的連續正整數編號(註)實際除了必須有n=1這一項(模板設計如此),n可以為任何值,標籤順序取決於參數順序而非n的值 | |
| textn (或tabn) |
第n個選項卡的內容,n為從1開始的連續正整數編號 | |
| Theme | 預設主題,有7種可選配色:
未指定主題時標籤為綠色文字、透明背景。主題配色會覆蓋LabelColor及LabelBackgroundColor,如需指定這兩項請不要使用主題 |
|
| DefaultTab | 指定頁面加載時顯示第幾個選項卡 | 1
|
| AutoWidth | 傳入yes時使tabs不再占滿整行
|
no
|
| Float | 傳入left或right時使選項卡不再占滿寬度的同時作左浮動或右浮動
|
no
|
| LabelSide | 標籤欄在選項卡面板中的位置,可選值為top(頂部)、right(右側)、bottom(底部)和left(左側)
|
top
|
| LabelBorderSide | 選項標籤裝飾條(框線)的位置,可選值為top(頂部)、right(右側)、bottom(底部)和left(左側)
|
bottom或LabelSide的值
|
| LabelColor | 被選中的標籤的前景顏色 | green
|
| LabelBackgroundColor | 被選中的標籤的背景顏色 | transparent
|
| LabelPadding | 標籤的內邊距 | 0 0.6em 0.15em
|
| LabelGrow | 傳入任意值時,使標籤寬度(註)當標籤欄在左/右側時為高度自動延展占滿整個標籤欄(默認情況下標籤寬度取決於標籤內容) | |
| TabBarWrap | 指定當標籤較多或較長時,標籤欄是否換行,默認自動換行,傳入no時標籤不換行(超出寬度時顯示水平滾動條)
|
|
| TextBackgroundColor | 選項內容的背景顏色 | transparent
|
| TextBorderColor | 選項內容的邊框顏色,此項缺省時無邊框 | |
| TextPadding | 選項內容的內邊距 | 0
|
| DividerSize | 標籤欄與內容的間隔,單位為px,只接受無單位的正數 | 0
|
| style | 應用於外層(Tabs)的額外CSS樣式 |
| {{Tabs}}、{{Tabs/core}}、{{Tabs/moe}}的對比 | |||
|---|---|---|---|
| tabs | tabs/core | tabs/moe | |
| 標題/內容參數 | bt[n] / tab[n] | label[n] / text[n] | 皆可 |
| 主題參數 | color | Theme 或 theme | 皆可 |
| 浮動參數 | float | Float 或 float | Float 或 float |
| 默認主題 | padding: 0.2em 0.3em 主題:black(黑色) padding: 1em border-width: 1px |
padding: 2px 主題:無(綠色) padding: 20px 30px border-width: 1px |
padding: 0 0.6em 0.15em 主題:無(綠色) padding: 0 border-width: 0 |
| 標籤圖標參數 | bticon[n] | N/A | |
| 標籤文字顏色 | 繼承自父元素 | LabelColor | |
| 標籤邊框/橫條顏色 | LabelColor (頂) LabelBorderColor (側) |
LabelColor 無側邊框 | |
| 標籤邊框/橫條位置 | LabelSide + LabelColorSideReverse | LabelBorderSide | |
| 標籤欄行為 | 自動換行,子元素尺寸不增長 | 取決於 LabelGrow 和 TabBarWrap | |
| 顏色參數覆蓋優先級 | 優先 LabelColor / LabelBackgroundColor | 優先主題 | |
| 內容首尾的行內元素 | 直接作為 innerHTML | 包裹在 <p> 標籤中(註)這是由於tabs/core的text前後相比tabs多一個空行。因此某些時候(e.g.,信息欄配圖)即使設置了|TextPadding=0仍會看到上下各0.6em的「內邊距」無法去掉,事實上是p標籤的外邊距。如果不想要這個邊距,可以給行內元素包裹一個<div>標籤。
|
取決於 tabs 寫法還是 tabs/core 寫法 |
效果展示
{{Tabs/moe
|label1 = 中国动画
|text1 = {{日本2025年冬季动画}}
|label2 = 日本动画
|text2 = {{日本2025年春季动画}}
|label3 = 欧美动画
|text3 = {{日本2025年夏季动画}}
}}
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||
{{Tabs/moe
|label1=阿库亚
|text1=[[File:星野阿库亚_单行本第三卷封面去字版.jpg|300px]]
|label2=露比
|text2=[[File:星野瑠美衣彩图.jpg|300px]]
|label3=爱
|text3=[[File:Ichigo_Production_KV.jpg|300px]]
|DefaultTab=3
|LabelSide=left
|LabelColor=#CC0080
|LabelBackgroundColor=#FFF
|LabelPadding=10px
|TextBackgroundColor=rgb(25,25,112)
|TextBorderColor=aquamarine
|TextPadding=20px
|AutoWidth=yes
}}
{{Album Infobox
|专辑名称= '''《Lull~于是我们~》<br>TV动画《来自风平浪静的明天》OP专辑'''
|tabs = {{Tabs/moe
|bt1=初回限定动画盘
|tab1=[[File:そして僕らは.jpg|280px]]
|bt2=初回限定盘
|tab2=[[File:そして僕らは3.jpg|280px]]
|bt3=通常盘
|tab3=[[File:そして僕らは2.jpg|280px]]
|LabelColor=#5B5BC9
|LabelBackgroundColor={{ColorOps|-80|#5B5BC9|html}}
}}
|原名 = {{lj|lull 〜そして僕らは〜<br>TVアニメ「凪のあすから」オープニングテーマ}}
|发行 = NBC<br>Universal Entertainment Japan
|发行地区 = 日本
|发行日期 = 2013年10月30日
|专辑类型 = 单曲
|左栏颜色 = {{ColorOps|-80|#5B5BC9|html}}
|标题颜色 = #5B5BC9
}}
| 《Lull~於是我們~》 TV動畫《來自風平浪靜的明天》OP專輯 | ||
| 原名 | lull 〜そして僕らは〜 TVアニメ「凪のあすから」オープニングテーマ | |
| 發行 | NBC Universal Entertainment Japan | |
| 發行地區 | 日本 | |
| 發行日期 | 2013年10月30日 | |
| 專輯類型 | 單曲 | |
{{Tabs/moe
|Theme = violet
|Float = right
|TabBarWrap = no
|style = width:300px
|bt1 = 1期动画化贺图
|tab1 = [[File:从零开始的动画宣传绘.jpg|x400px]]
|bt2 = 1期主视觉图1
|tab2 = [[File:Re_Zero_Anime_KV.png|x400px]]
|bt3 = 1期主视觉图2
|tab3 = [[File:Re_Zero_Anime_KV2.jpg|x400px]]
|bt4 = 1期主视觉图3
|tab4 = [[File:Re_Zero_Anime_KV3.jpg|x400px]]
|bt5 = 1期新编集版主视觉图
|tab5 = [[File:Re_Zero_Anime_S1_New_Edit.jpg|x400px]]
|bt6 = 2期动画化贺图
|tab6 = [[File:Re_Zero_Anime_S2_.jpg|x400px]]
|bt7 = 2期预告视觉图
|tab7 = [[File:Re_Zero_Anime_S2_Teaser.jpg|x400px]]
|bt8 = 2期主视觉图1
|tab8 = [[File:Re_Zero_Anime_S2_KV.jpg|x400px]]
|bt9 = 2期主视觉图2
|tab9 = [[File:Re_Zero_Anime_S2_KV2.png|x400px]]
|bt10 = 3期动画化贺图
|tab10 = [[File:Re_Zero_Anime_S3.jpg|x400px]]
|bt11 = 3期预告视觉图
|tab11 = [[File:Re_Zero_Anime_S3_Teaser.jpg|x400px]]
}}