User:北方珈音/Template:Tabs/moe

文档  

这个文档嵌入自User:北方珈音/Template:Tabs/moe/doc。

此模板“北方珈音/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) 未指定主题时标签为绿色文字、透明背景。主题配色会覆盖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 写法

效果展示

示例1

{{Tabs/moe
|label1 = 中国动画
|text1  = {{日本2024年冬季动画}}
|label2 = 日本动画
|text2  = {{日本2024年春季动画}}
|label3 = 欧美动画
|text3  = {{日本2024年夏季动画}}
}}

中国动画

日本动画

欧美动画

示例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
}}

阿库亚

露比

爱

示例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专辑
初回限定动画盘 初回限定盘 通常盘
原名	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期动画化贺图

1期主视觉图1

1期主视觉图2

1期主视觉图3

1期新编集版主视觉图

2期动画化贺图

2期预告视觉图

2期主视觉图1

2期主视觉图2

3期动画化贺图

3期预告视觉图