模板:切换显示按钮样式

模板文档  

这个文档嵌入自Template:切换显示/doc。

本系列模板用以手动显示/隐藏特定字符串，并批量指定字符串及按钮样式。

用法

注意字符串代号可以用小写英文字母、大写英文字母、汉字等（不被视为wikitext）：

• 不得包含'、"、<、>、\、/、|、$，不得以@开头，否则将被无视；
• 大小写、繁简敏感，请牢记。

{{切换显示|参数1|参数2|参数3}}：

必需，用以指定需要手动切换的字符串。本模板没有数量限制。

• 参数1：字符串代号；
• 参数2：字符串内容（wikitext格式）；
  • 在参数3未指定为块元素名时参数2不可以填写需要换行的wikitext，反之当参数3指定为块元素名时参数2没有任何限制（参见#需要换行的wikitext）。
• 参数3：可选，用以指定字符串根元素的标签名（默认为span）（参见#根元素标签）。

{{切换显示/模板|@=【模板名称】|@tag=【根元素标签】|【参数1】=|【参数2】@【字符串代号1】=|…}}：

必需，是{{切换显示}}的包装（即本模板是{{切换显示}}的特殊实现，与之等价），用以指定需要手动切换一个模板的某个/些参数的字符串，以减少代码书写量，提高可阅读性。本模板没有数量限制。

• 参数格式中【】内为用户填写内容（注意填写时不要加【】，除非代号与文本内确有此内容）。
• 参数@：调用的目标模板的名称，不需要加Template:名字空间前缀；
• 参数@tag：可选，同{{切换显示}}的参数3，用以指定字符串根元素的标签名（默认为span）（参见#根元素标签）；
• 格式参数：调用的目标模板的参数的名称；
  • 参数名称与直接调动目标模板所需要书写的参数名称基本一致。唯一区别是，目标模板参数名称中的每个@字符都需要写成2个（@@），以免和表示参数名称与字符串代号间隔的1个@字符混淆；
• 格式字符串代号：字符串代号；
  • 若不填写格式字符串代号，这个参数的值将会作为所有字符串代号的默认值；

注：{{切换显示/模板}}实际上多次调用了目标模板，而非仅对参数部分进行处理。若目标模板代码中包含计数器等（设计时未考虑重复调用情况），需要注意对其状态进行重置。

{{切换显示按钮|@default=|@radio=|@reverse=|@forceNoCancel=|@toggleClass=|【字符串代号1】=【按钮文本1】|…}}：

必需，用以显示切换按钮，本模板没有数量限制。若一个本模板中有多个“字符串代号”，则这些“字符串代号”对应的按钮将并排显示。

• 参数格式为 |【字符串代号】=【按钮文本】，其中【】内为用户填写内容（注意填写时不要加【】，除非代号与文本内确有此内容）。
  【按钮文本】为wikitext格式，但其内的点击事件不会被触发（即链接、缩略图等无法点开）。
  • 可选格式如下（仅@on和@off会被识别为参数，“@+其他任意字符”则会被识别为“字符串代号”的一部分）：
    • |【字符串代号】@on=【按钮文本】：指定字符串代号对应按钮激活时显示的按钮文本（普通模式下按钮复选框/单选框勾选时显示，反转模式下按钮复选框/单选框未勾选时显示）；
    • |【字符串代号】@off=【按钮文本】：指定字符串代号对应按钮未激活时显示的按钮文本（普通模式下按钮复选框/单选框未勾选时显示，反转模式下按钮复选框/单选框勾选时显示）。
  • 另外，如果 【字符串代号】包含$，那么该按钮绑定的实际代号为 【字符串代号】按$分割后的数组，通过此方法可以将单一按钮绑定到多个元素上。
• 另外，可以选择配置以下选项：
  • @default：可选，用以指定默认激活的按钮（此处的参数值为该按钮对应的字符串代号）；
  • @radio：可选，参数值不为空时将会使该模板内的按钮变为单选框，一次只能显示一种字符串；
    • 使用该参数时单选按钮旁边会显示“取消选择”按钮。
  • @reverse：可选，参数值不为空时将会使该模板内的按钮变为反转模式：没有勾选的将会显示，勾选的将会隐藏；
  • @forceNoCancel：可选，参数值不为空且@radio和@default均不为空时强制隐藏取消选择单选框。
  • @toggleClass：可选，参数值不为空时可以指定切换显示具体切换的 class 名称；此 class 默认为hidden，所以只要改成hidden以外的 class 名称就可以不隐藏切换显示的内容、而是改为利用 CSS 样式表应用不同的显示效果。

注：{{切换显示}}与{{切换显示按钮}}的位置决定了字符串和按钮的位置关系，例如编辑文档时{{切换显示}}在{{切换显示按钮}}的前面，则显示内容时字符串在按钮的前面，反之亦然。

{{切换显示样式|【字符串代号1】=【样式文本1】|…}}：

可选，用以批量指定某些需要手动切换的字符串的样式，会同时影响按钮内文字的样式（普通模式下按钮复选框/单选框勾选时激活，反转模式下按钮复选框/单选框未勾选时激活）。本模板没有数量限制但是一个就够用了。

• 参数格式为 |【字符串代号】=【样式文本】，其中【】内为用户填写内容（注意填写时不要加【】，除非代号与文本内确有此内容）。

{{切换显示按钮样式}}：

可选，用以指定按钮样式。本模板没有数量限制但是一个就够用了。

• 参数格式如下：
  • |【字符串代号】=【样式文本】：指定字符串代号对应按钮的通用样式；
    • |【字符串代号】@on=【样式文本】：指定字符串代号对应按钮激活时的样式（普通模式下按钮复选框/单选框勾选时激活，反转模式下按钮复选框/单选框未勾选时激活）；
    • |【字符串代号】@off=【样式文本】：指定字符串代号对应按钮未激活时的样式（普通模式下按钮复选框/单选框未勾选时激活，反转模式下按钮复选框/单选框勾选时激活）；
    • |【字符串代号】@input=【样式文本】：指定单选框“圆点”和复选框“对勾背景”的样式（仅在显示这些内容的情况下生效）；
    • 【字符串代号】为@cancel时将指定“取消选择”按钮的样式（所有“取消选择”按钮都使用该样式）；
      • @cancel@on指定“取消选择”按钮未激活时的样式；
      • @cancel@off指定“取消选择”按钮激活时的样式；
      • @cancel=display:none可以隐藏“取消选择”按钮；

其中，on和off样式优先于通用样式，仅在未指定on和off样式的情况下才会使用通用样式。

注：{{切换显示样式}}和{{切换显示按钮样式}}都可以指定按钮文本样式。当二者同时存在时，{{切换显示按钮样式}}优先级高于{{切换显示样式}}。

示例

示例已展开展开示例

第一段话：{{切换显示|啦啦啦|111}}

第二段话：{{切换显示|bla|222}}

第三段话：{{切换显示|bla|333}}

{{切换显示样式|啦啦啦=color: red; font-weight: 700;}}

{{切换显示按钮
|@default=啦啦啦
|啦啦啦=显示第一段话
|bla=[[File:Moegirl is watching you.jpg|100px]]显示第二、三段话
}}

第一段话：111

第二段话：222

第三段话：333

显示第一段话显示第一段话显示第二、三段话显示第二、三段话

第四段话：{{切换显示|HHH|444}}

{{切换显示样式|HHH=color: blue; font-weight: 700;}}

{{切换显示按钮
|@reverse=任意不为空的内容
|HHH=显示第四段话
}}

第四段话：444

显示第四段话显示第四段话

第五段话：{{切换显示|aaa|555}}

{{切换显示按钮样式|aaa@on=border-color:green}}

{{切换显示按钮
|@radio=任意不为空的内容
|aaa=显示第五段话
}}

第五段话：555

显示第五段话显示第五段话

第六段话：{{切换显示|mi苏TA|666}}

{{切换显示按钮样式|mi苏TA=border-color:red}}

第七段话：{{切换显示|uzi|UZI彳亍}}

{{切换显示按钮样式|uzi@off=border-color:blue}}
{{切换显示按钮
|@default=mi苏TA
|@radio=任意不为空的内容
|@reverse=任意不为空的内容
|mi苏TA=显示第六段话
|uzi=显示第七段话
}}

第六段话：666

第七段话：UZI彳亍

显示第六段话显示第六段话显示第七段话显示第七段话

你的属性：{{切换显示|roma|精罗}} {{切换显示|cccp|精苏}} {{切换显示|mata川|懒狗}}

{{切换显示样式
|roma=color: blue; font-weight: 700;
|cccp=color: red; font-weight: 700; 
|mata川=color: rgb(77, 77, 77); font-weight: 700;
}}

{{切换显示按钮
|roma=君士坦丁堡
|cccp=斯大林格勒
|mata川=6324
}}

你的属性：精罗 精苏 懒狗

君士坦丁堡君士坦丁堡斯大林格勒斯大林格勒63246324

TA死于{{切换显示/模板|@=Death date and age|1=1|2=11|3=22|4@y=2020|5=1|6=7}}。

{{切换显示按钮
|y=显示日期
}}

TA死于1年11月22日(1-11-22)（-2019岁）。

显示日期显示日期

一句作文：想了想，[[四宫辉夜]]还是决定{{切换显示/模板|@=ruby
|1=说服
|2=shui fu
|1@b1=睡服
|1@b2=攻略
|2@b3=shuo fu
}}他……{{黑幕|（以下省略三万字）}}

{{切换显示按钮
|@radio=yes
|@default=b3
|b1=真相
|b2=河蟹
|b3=正确读音}}

一句作文：想了想，四宫辉夜还是决定睡服（shui fu）攻略（shui fu）说服（shuo fu）他……（以下省略三万字）

真相真相河蟹河蟹正确读音正确读音

第八段话：{{切换显示|qqq|前前前}}
第九段话：{{切换显示|ooo|后后后}}

{{切换显示样式|qqq=color: green;|ooo=color: pink;}}

{{切换显示按钮
|qqq=我在前
|ooo=我在后
}}

第八段话：前前前 第九段话：后后后

我在前我在前我在后我在后

第十段话：{{切换显示|sss|上上上}}

第十一段话：{{切换显示|xxx|下下下}}

{{切换显示样式|sss=color: purple;|xxx=color: orange;}}

{{切换显示按钮
|@radio=anything
|sss=我在上
|xxx=我在下
}}

第十段话：上上上

第十一段话：下下下

我在上我在上我在下我在下

TA已经活了{{切换显示/模板|@=For year month day|month=1|day=21|year@己=1|year@朋=1919|year@实=2020}}。

{{切换显示按钮
|@radio=yes
|@default=己
|实=实际情况
|朋=朋友说的
|己=自己说的
}}

TA已经活了2023年零9个月零9日105年零9个月零9日4年零9个月零9日。

实际情况实际情况朋友说的朋友说的自己说的自己说的

{{切换显示|x|写轮眼}}

{{切换显示按钮样式|x@on=color:red;font-weight:bold;border-color:red;}}

{{切换显示按钮
|x@on=写轮眼开启
|x@off=写轮眼关闭
}}

写轮眼

写轮眼开启写轮眼关闭

{{切换显示|sy|太好了！}}{{切换显示|ys|太好了！}}

{{切换显示样式|sy=color:red;|ys=color:orange;}}

{{切换显示按钮样式|sy@on=color:red;font-weight:bold;border-color:red;|ys@on=color:orange;font-weight:bold;border-color:orange;}}

{{切换显示按钮
|@radio=yes
|sy@on=我赢了！
|sy@off=我输了~
|ys@on=我赢了！
|ys@off=我输了~
}}

太好了！太好了！

我赢了！我输了~我赢了！我输了~

这就是精彩片段？{{切换显示|civia|确实是精彩片段。}}

{{切换显示按钮样式|civia@off=color:#00BFFF;font-weight:bold;border-color:#00BFFF;|civia@on=opacity:0.5;border-left-width:1px;color:grey;border-color:grey;}}

{{切换显示按钮
|@reverse=yes
|civia@off=精彩片段
|civia@on=精彩片段已关闭
|@default=civia
}}

这就是精彩片段？确实是精彩片段。

精彩片段已关闭精彩片段

{{切换显示|1|找精彩内容恰不到人好惨。}}

{{切换显示|2|到处宣传没人听。}}

{{切换显示|3|自己干。}}

{{切换显示样式|1=color:#FF43DD;|2=color:#DD4532;|3=color:#675532;}}

{{切换显示按钮样式|1@off=color:#FF43DD;|2@off=color:#DD4532;|3@off=color:#675532;}}

{{切换显示按钮
|@reverse=yes
|@radio=yes
|1@on=你怎么啦？
|1@off=我明白了。
|2@on=为什么？
|2@off=我知道了。
|3@on=那咋办？
|3@off=祝你好运。
}}

找精彩内容恰不到人好惨。

到处宣传没人听。

自己干。

你怎么啦？我明白了。为什么？我知道了。那咋办？祝你好运。

第十二段话：{{切换显示|red|小小小勾}}

第十三段话：{{切换显示|big|大大大勾}}

第十四段话：{{切换显示|green|大大大点}}

第十五段话：{{切换显示|small|小小小点}}

{{切换显示样式|red=color:red;font-weight:bold;|green=color:green;font-weight:bold;}}

{{切换显示按钮样式|red@input=width:8px;height:8px;|green@input=width:20px;height:20px;|big@input=width:20px;height:20px;|small@input=width:8px;height:8px;}}

{{切换显示按钮
|red=这对勾真小
|big=这对勾真大
}}

{{切换显示按钮
|@radio=yes
|green=这圆点真大
|small=这圆点真小
}}

第十二段话：小小小勾

第十三段话：大大大勾

第十四段话：大大大点

第十五段话：小小小点

这对勾真小这对勾真小这对勾真大这对勾真大

这圆点真大这圆点真大这圆点真小这圆点真小

你可以将单一按钮绑定到多个对象上：

{{切换显示按钮
|div1=显示div1
|div2=显示div2
|div3=显示div3
|div1$div2=显示div1、div2
|div2$div3=显示div3、div3
|div1$div3=显示div1、div3
|div1$div2$div3=显示div1、div2、div3
}}
{{切换显示|div1|
div1<nowiki/>
|div}}{{切换显示|div2|
div2<nowiki/>
|div}}{{切换显示|div3|
div3<nowiki/>
|div}}

显示div1显示div1显示div2显示div2显示div3显示div3显示div1、div2显示div1、div2显示div2、div3显示div2、div3显示div1、div3显示div1、div3显示div1、div2、div3显示div1、div2、div3

div1

div2

div3

根元素标签

本段文字说明的是{{切换显示}}的 参数3 及{{切换显示/模板}}的参数 @tag。

• 该参数的参数值可选div、span等，默认值为span。
  • 当参数值为span时，字符串根元素为行内元素。需要换行的模板在此情况下无法隐藏，将一直显示；
  • 当参数值为div时，字符串根元素为块状元素。需要换行的模板在此情况下可以隐藏，随按钮的激活与否保持显示/隐藏状态；
  • 不需要换行的模板不受参数值的限制，但会根据字符串根元素的类型而改变版式。

示例：

需要换行的模板

参数3的参数值为span时（此时本模板无法生效）：

{{切换显示按钮
|span1=显示gifts
}}{{切换显示|span1|
{{bilibiliVideo|id=BV1nC4y147iy|page=1|width=600|height=421|autoplay=yes}}<nowiki/>
|span}}

显示gifts显示gifts

宽屏模式显示视频

参数3的参数值为div时：

{{切换显示按钮
|div1=显示gifts
}}{{切换显示|div1|
{{bilibiliVideo|id=BV1nC4y147iy|page=1|width=600|height=421|autoplay=yes}}<nowiki/>
|div}}

显示gifts显示gifts

宽屏模式显示视频

不需要换行的模板

参数3的参数值为span时：

{{切换显示按钮
|span2=显示丘比
}}{{切换显示|span2|
{{颜文字|丘比}}<nowiki/>
|span}}

显示丘比显示丘比 ／人◕ ‿‿ ◕人＼

参数3的参数值为div时：

{{切换显示按钮
|div2=显示丘比
}}{{切换显示|div2|
{{颜文字|丘比}}<nowiki/>
|div}}

显示丘比显示丘比

／人◕ ‿‿ ◕人＼

需要换行的wikitext

添加表格

注：由于表格wikitext较为娇贵（恶心），里面所有带有|的格式符号都需要进行替换。

当然，任何时候=都需要替换。

{{切换显示按钮|data1=表格|@default=data1}}
{{切换显示|data1|<nowiki/>
{{(!}} class{{=}}"wikitable sortable"
{{!-}}
! A
! B
{{!-}}
{{!}} 1
{{!}} 2
{{!-}}
{{!}} 3
{{!}} 4
{{!)}}|div}}{{切换显示样式|data1=color: red; font-weight: 700;}}

表格表格

A	B
1	2
3	4

添加其他需要换行的wikitext

注：此处的<nowiki/>与wikitext之间应换行，否则wikitext会失效。

{{切换显示按钮|data2=列表|@default=data2}}
{{切换显示|data2|<nowiki/>
* A
* B
*# C
*# D
# 3
##8
; E
: F
|div}}{{切换显示按钮样式|data2=border-color:red}}

列表列表

• A
• B
  1. C
  2. D

1. 3
   1. 8

E

F

重定向

1. 别名：
   • Template:切换显示又名Template:文本切换显示、Template:Switch；
   • Template:切换显示/模板又名Template:文本切换显示/模板、Template:Switch/Template；
   • Template:切换显示按钮又名Template:文本切换显示按钮、Template:Switch/Button；
   • Template:切换显示样式又名Template:文本切换显示样式、Template:Switch/Style；
   • Template:切换显示按钮样式又名Template:文本切换显示按钮样式、Template:Switch/Button/Style。