模板:切換顯示按鈕樣式

模板文檔  

這個文檔嵌入自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年零11個月零4日105年零11個月零4日4年零11個月零4日。

實際情況實際情況朋友說的朋友說的自己說的自己說的

{{切换显示|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。