更符合萌百风格的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 = {{日本2024年冬季动画}} |label2 = 日本动画 |text2 = {{日本2024年春季动画}} |label3 = 欧美动画 |text3 = {{日本2024年夏季动画}} }}
|
|
{{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]] }}