Template:Checkbox: Difference between revisions
Jump to navigation
Jump to search
mNo edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
<includeonly><div id="{{{id|cb}}}" data-id="checkbox" data-checked="{{{check|yes}}}" | <includeonly><div id="{{{id|cb}}}" data-id="checkbox" data-checked="{{{check|yes}}}" data-hideYes="{{{hideYes|}}}" data-hideNo="{{{hideNo|}}}" data-showYes="{{{showYes|}}}" data-showNo="{{{showNo|}}}" class="image-{{{color|black}}}" style="display:inline-flex; cursor: pointer; -webkit-user-select: none; -ms-user-select: none; user-select: none;"><div style="pointer-events: none; display:contents; width:28px; height:14px"><span style="margin-left:-6px; margin-top:-8px">[[File:Tweak_Generic_Button.png|link=|30px]]</span><span id="check-{{{id|cb}}}" style="position:absolute; display: {{#ifeq: {{lc:{{{check|yes}}}}} | yes | ruby | none }}; margin-top:-5px">[[File:Tweak_GenericSetting_Yes.png|link=|18px]]</span><span id="uncheck-{{{id|cb}}}" style="position:absolute; display: {{#ifeq: {{lc:{{{check|yes}}}}} | no | ruby | none }}; margin-top:-5px">[[File:Tweak_GenericSetting_No.png|link=|18px]]</span></div><div style="margin-left: -2px; padding-right: 4px; margin-top:-5px">{{{title|}}}</div></span></div></div></includeonly><noinclude> | ||
<span style="background:white; padding-top:5px; padding-bottom:6px;">{{checkbox|color=black|check=yes|title=Title1|id=cb1}}{{checkbox|color=black|check=no|title=Title2|id=cb2}}</span> | <span style="background:white; padding-top:5px; padding-bottom:6px;">{{checkbox|color=black|check=yes|title=Title1|id=cb1|hideYes=1,2,3,4|hideNo=|showYes=|showNo=}}{{checkbox|color=black|check=no|title=Title2|id=cb2|hideYes=|hideNo=|showYes=|showNo=}}</span> | ||
<span style="background:black; padding-top:5px; padding-bottom:6px; padding-left:4px;">{{checkbox|color=white|check=yes|title=Title3|id=cb3}}{{checkbox|color=white|check=no|title=Title4|id=cb4}}</span> | <span style="background:black; padding-top:5px; padding-bottom:6px; padding-left:4px;">{{checkbox|color=white|check=yes|title=Title3|id=cb3|hideYes=|hideNo=|showYes=|showNo=}}{{checkbox|color=white|check=no|title=Title4|id=cb4|hideYes=|hideNo=|showYes=|showNo=}}</span> | ||
Checkboxes can be used to hide & show different elements. | |||
==Usage== | ==Usage== | ||
<pre> | <pre> | ||
{{checkbox|color=black|check=Yes|title=Title1|id=cb1}} | {{checkbox|color=black|check=Yes|title=Title1|id=cb1|hideYes=|hideNo=|showYes=|showNo=}} | ||
{{checkbox|color=black|check=No|title=Title2|id=cb2}} | {{checkbox|color=black|check=No|title=Title2|id=cb2|hideYes=|hideNo=|showYes=|showNo=}} | ||
{{checkbox|color=white|check=Yes|title=Title3|id=cb3}} | {{checkbox|color=white|check=Yes|title=Title3|id=cb3|hideYes=|hideNo=|showYes=|showNo=}} | ||
{{checkbox|color=white|check=No|title=Title4|id= | {{checkbox|color=white|check=No|title=Title4|id=cb4|hideYes=|hideNo=|showYes=|showNo=}} | ||
</pre> | </pre> | ||
color - Text and checkbox color | |||
check - If it's checked by default (yes/no) | |||
title - Optional text next to checkbox | |||
id - Optional, needed when more than one checkboxes are present. Each needs a unique id. | |||
'''The following are optional, use a list of classes to show/hide with the respective conditions:''' | |||
hideYes - hide when checked | |||
hideNo - hide when unchecked | |||
showYes - show when checked | |||
showNo - show when unchecked | |||
This is the syntax for the list of class names of the elements you want to show/hide, each class name needs to be separated by a comma like this: | |||
<code>hideYes=class1,class2,class3</code> | |||
'''Note:''' you should put these class names on a separate span that goes over your elements, because the checkbox changes the <code>style="display:*"</code> attribute and will overwrite if the span already has an existing display attribute. | |||
</noinclude> | </noinclude> | ||
Revision as of 13:18, 7 June 2024
Checkboxes can be used to hide & show different elements.
Usage
{{checkbox|color=black|check=Yes|title=Title1|id=cb1|hideYes=|hideNo=|showYes=|showNo=}}
{{checkbox|color=black|check=No|title=Title2|id=cb2|hideYes=|hideNo=|showYes=|showNo=}}
{{checkbox|color=white|check=Yes|title=Title3|id=cb3|hideYes=|hideNo=|showYes=|showNo=}}
{{checkbox|color=white|check=No|title=Title4|id=cb4|hideYes=|hideNo=|showYes=|showNo=}}
color - Text and checkbox color
check - If it's checked by default (yes/no)
title - Optional text next to checkbox
id - Optional, needed when more than one checkboxes are present. Each needs a unique id.
The following are optional, use a list of classes to show/hide with the respective conditions:
hideYes - hide when checked
hideNo - hide when unchecked
showYes - show when checked
showNo - show when unchecked
This is the syntax for the list of class names of the elements you want to show/hide, each class name needs to be separated by a comma like this:
hideYes=class1,class2,class3
Note: you should put these class names on a separate span that goes over your elements, because the checkbox changes the style="display:*" attribute and will overwrite if the span already has an existing display attribute.