Template:Checkbox: Difference between revisions

From Imagisphere
Jump to navigation Jump to search
No edit summary
(Fixed broken "Tweak_Generic_Button.png" file link)
 
(24 intermediate revisions by 2 users not shown)
Line 1: Line 1:
<includeonly><div style="display: inline-flex; width:28px; height:14px"><span style="position:absolute">[[File:Tweak_Generic_Button.png|link=|30px]]</span>
<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:UI_Generic_Checkbox.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="position:absolute; padding-left:6px; padding-top:3px">{{#switch:{{{1|}}}
<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>
|#default
<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>
|checked=[[File:Tweak_GenericSetting_Yes.png|link=|18px|{{{checked}}}|{{{Yes}}}]]{{{title}}}
Checkboxes can be used to hide & show different elements.
|unchecked=[[File:Tweak_GenericSetting_No.png|link=|18px|{{{unchecked}}}|{{{No}}}]]{{{title}}}
==Usage==
}}</span></div></includeonly><noinclude>
{{checkbox}}{{checkbox|unchecked}}
<pre>
<pre>
* <code><nowiki>{{checkbox}}</nowiki></code> ⇒ {{checkbox}}
{{checkbox|color=black|check=Yes|title=Title1|id=cb1|hideYes=|hideNo=|showYes=|showNo=}}
* <code><nowiki>{{checkbox|checked|title}}</nowiki></code> ⇒ {{checkbox|checked|title}}
{{checkbox|color=black|check=No|title=Title2|id=cb2|hideYes=|hideNo=|showYes=|showNo=}}
* <code><nowiki>{{checkbox|unchecked|title}}</nowiki></code> ⇒ {{checkbox|unchecked|title}}
{{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=}}
</pre>
</pre>
color - Optional, text and checkbox color
check - Optional, 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 <code><<nowiki/>span></code> 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>

Latest revision as of 08:34, 22 June 2024

UI Generic Checkbox.pngTweak GenericSetting Yes.png
Title1
UI Generic Checkbox.pngTweak GenericSetting No.png
Title2
UI Generic Checkbox.pngTweak GenericSetting Yes.png
Title3
UI Generic Checkbox.pngTweak GenericSetting No.png
Title4

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 - Optional, text and checkbox color

check - Optional, 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.

Retrieved from "https://wiki.imagisphere.me/index.php?title=Template:Checkbox&oldid=27487"