• Moegirl.ICU:萌娘百科流亡社群 581077156(QQ),欢迎对萌娘百科运营感到失望的编辑者加入
  • Moegirl.ICU:账号认领正在试运行,有意者请参照账号认领流程

使用者:北方珈音/Template:Tabs/moe/doc

萌娘百科,萬物皆可萌的百科全書!轉載請標註來源頁面的網頁連結,並聲明引自萌娘百科。內容不可商用。
跳至導覽 跳至搜尋
Under construction icon-green.svg
此模板「北方珈音/Template:Tabs/moe」目前處於測試階段。
歡迎您協助測試本模板。如果在使用過程中出現問題,你可以在模板討論頁提出。

更符合萌百風格的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種可選配色:
  • black
  • blue
  • brown (yellow)
  • green
  • orange
  • pink (red)
  • violet (purple)

未指定主題時標籤為綠色文字、透明背景。主題配色會覆蓋LabelColorLabelBackgroundColor,如需指定這兩項請不要使用主題

DefaultTab 指定頁面加載時顯示第幾個選項卡 1
AutoWidth 傳入yes時使tabs不再占滿整行 no
Float 傳入leftright時使選項卡不再占滿寬度的同時作左浮動或右浮動 no
LabelSide 標籤欄在選項卡面板中的位置,可選值為top(頂部)、right(右側)、bottom(底部)和left(左側) top
LabelBorderSide 選項標籤裝飾條(框線)的位置,可選值為top(頂部)、right(右側)、bottom(底部)和left(左側) bottomLabelSide的值
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
標籤欄行為 自動換行,子元素尺寸不增長 取決於 LabelGrowTabBarWrap
顏色參數覆蓋優先級 優先 LabelColor / LabelBackgroundColor 優先主題
內容首尾的行內元素 直接作為 innerHTML 包裹在 <p> 標籤中(註)這是由於tabs/core的text前後相比tabs多一個空行。因此某些時候(e.g.,信息欄配圖)即使設置了|TextPadding=0仍會看到上下各0.6em的「內邊距」無法去掉,事實上是p標籤的外邊距。如果不想要這個邊距,可以給行內元素包裹一個<div>標籤。 取決於 tabs 寫法還是 tabs/core 寫法

效果展示

示例1
{{Tabs/moe
|label1 = 中国动画
|text1  = {{日本2025年冬季动画}}
|label2 = 日本动画
|text2  = {{日本2025年春季动画}}
|label3 = 欧美动画
|text3  = {{日本2025年夏季动画}}
}}
中國動畫
日本動畫
示例2
{{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
}}
阿庫亞

星野阿庫亞 單行本第三卷封面去字版.jpg

露比

星野瑠美衣彩圖.jpg

Ichigo Production KV.jpg

示例3
{{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專輯
初回限定動畫盤
そして僕らは.jpg
初回限定盤
そして僕らは3.jpg
通常盤
そして僕らは2.jpg
原名 lull 〜そして僕らは〜
TVアニメ「凪のあすから」オープニングテーマ
發行 NBC
Universal Entertainment Japan
發行地區 日本
發行日期 2013年10月30日
專輯類型 單曲
示例4
{{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]]
}}
1期動畫化賀圖
從零開始的動畫宣傳繪.jpg
1期主視覺圖1
Re Zero Anime KV.png
1期主視覺圖2
Re Zero Anime KV2.jpg
1期主視覺圖3
Re Zero Anime KV3.jpg
1期新編集版主視覺圖
Re Zero Anime S1 New Edit.jpg
2期動畫化賀圖
Re Zero Anime S2 .jpg
2期預告視覺圖
Re Zero Anime S2 Teaser.jpg
2期主視覺圖1
Re Zero Anime S2 KV.jpg
2期主視覺圖2
Re Zero Anime S2 KV2.png
3期動畫化賀圖
Re Zero Anime S3.jpg
3期預告視覺圖
Re Zero Anime S3 Teaser.jpg