- Welcome to the Kancolle Wiki!
- If you have any questions regarding site content, account registration, etc., please visit the KanColle Wiki Discord
Difference between revisions of "Template:Detail"
Jump to navigation
Jump to search
m |
|||
Line 3: | Line 3: | ||
<span class="toggle-hide" style="{{{hide_style|cursor:pointer;color:#006cb0;}}}">☒ {{{hide_text|Show details}}}</span> | <span class="toggle-hide" style="{{{hide_style|cursor:pointer;color:#006cb0;}}}">☒ {{{hide_text|Show details}}}</span> | ||
</div>|{{#if:{{{1|}}}|<span class="toggle-target-{{{target|default}}}">{{{1|}}}</span>|class="toggle-target-{{{target|default}}}"}}}}</includeonly><noinclude> | </div>|{{#if:{{{1|}}}|<span class="toggle-target-{{{target|default}}}">{{{1|}}}</span>|class="toggle-target-{{{target|default}}}"}}}}</includeonly><noinclude> | ||
− | This is a helper template for using [[MediaWiki:DetailToggle.js]]. | + | This is a helper template for using [[MediaWiki:DetailToggle.js]] functions. |
+ | ==Parameters== | ||
+ | *'''target''': property name for hidable elements, <code>toggle-target-'''target'''</code> will be used as a class and a local storage key; defaults to <code>default</code> | ||
+ | *'''button''': set to add a toggle button | ||
+ | **'''default''': <code>hide</code> or <code>show</code>, to hide or show hidable content by default; defaults to <code>hide</code> | ||
+ | **'''show_style''': button style when showing hidable content; defaults to <code>cursor:pointer;color:#006cb0;</code> | ||
+ | **'''hide_style''': button style when not showing hidable content; defaults to <code>cursor:pointer;color:#006cb0;</code> | ||
+ | **'''show_text''': button text when showing hidable content; defaults to <code>Show details</code> | ||
+ | **'''hide_text''': button text when not showing hidable content; defaults to <code>Show details</code> | ||
+ | *Without '''button''' a class for hidable element will be added | ||
+ | **'''[[[1]]]''': hidable content in a <code>span</code> element | ||
==Examples== | ==Examples== | ||
===Default=== | ===Default=== | ||
Line 14: | Line 24: | ||
===Custom property=== | ===Custom property=== | ||
<pre> | <pre> | ||
− | {{Detail|button=true|target=example- | + | {{Detail|button=true|target=example-custom-property}} |
− | {{Detail||target=example- | + | {{Detail||target=example-custom-target|Hidden content}} |
</pre> | </pre> | ||
− | {{Detail|button=true|target=example- | + | {{Detail|button=true|target=example-custom-property}} |
− | {{Detail|target=example- | + | {{Detail||target=example-custom-target|Hidden content}} |
− | === | + | ===Showing details by default=== |
<pre> | <pre> | ||
− | {{Detail|button=true|target=example- | + | {{Detail|button=true|target=example-custom-default|default=show}} |
− | + | {{Detail|Hidable content|target=example-custom-default}} | |
</pre> | </pre> | ||
− | {{Detail|button=true|target=example- | + | {{Detail|button=true|target=example-custom-default|default=show}} |
− | + | {{Detail|Hidable content|target=example-custom-default}} | |
− | === | + | ===Custom hidable elements=== |
<pre> | <pre> | ||
− | {{Detail|button=true|target=example-row|show_text=Show row|hide_text=Show row (hidden)}} | + | {{Detail|button=true|target=example-custom-hidable-element}} |
+ | <div {{Detail|target=example-custom-hidable-element}}>Hidden content</div> | ||
+ | </pre> | ||
+ | {{Detail|button=true|target=example-custom-hidable-element}} | ||
+ | <div {{Detail|target=example-custom-hidable-element}}>Hidden content</div> | ||
+ | ===Table=== | ||
+ | <pre> | ||
+ | {{Detail|button=true|target=example-row|default=show|show_text=Show row|hide_text=Show row (hidden)}} | ||
{{Detail|button=true|target=example-column|show_text=Show column|hide_text=Show column (hidden)}} | {{Detail|button=true|target=example-column|show_text=Show column|hide_text=Show column (hidden)}} | ||
− | {| | + | {| class="wikitable" |
|Normal row | |Normal row | ||
|... | |... | ||
|{{Detail|target=example-column}}|Hidden column | |{{Detail|target=example-column}}|Hidden column | ||
|- {{Detail|target=example-row}} | |- {{Detail|target=example-row}} | ||
− | | | + | |Hidable row |
|... | |... | ||
|{{Detail|target=example-column}}|Hidden column | |{{Detail|target=example-column}}|Hidden column | ||
Line 47: | Line 64: | ||
|{{Detail|target=example-column}}|Hidden column | |{{Detail|target=example-column}}|Hidden column | ||
|- {{Detail|target=example-row}} | |- {{Detail|target=example-row}} | ||
− | | | + | |Hidable row |
|... | |... | ||
|{{Detail|target=example-column}}|Hidden column | |{{Detail|target=example-column}}|Hidden column | ||
|} | |} | ||
</noinclude> | </noinclude> |
Revision as of 21:34, 18 July 2016
This is a helper template for using MediaWiki:DetailToggle.js functions.
Parameters
- target: property name for hidable elements,
toggle-target-target
will be used as a class and a local storage key; defaults todefault
- button: set to add a toggle button
- default:
hide
orshow
, to hide or show hidable content by default; defaults tohide
- show_style: button style when showing hidable content; defaults to
cursor:pointer;color:#006cb0;
- hide_style: button style when not showing hidable content; defaults to
cursor:pointer;color:#006cb0;
- show_text: button text when showing hidable content; defaults to
Show details
- hide_text: button text when not showing hidable content; defaults to
Show details
- default:
- Without button a class for hidable element will be added
- [[[1]]]: hidable content in a
span
element
- [[[1]]]: hidable content in a
Examples
Default
{{Detail|button=true}} {{Detail|Hidden content}}
☑ Show details ☒ Show details
Hidden content
Custom property
{{Detail|button=true|target=example-custom-property}} {{Detail||target=example-custom-target|Hidden content}}
☑ Show details ☒ Show details
class="toggle-target-example-custom-target"
Showing details by default
{{Detail|button=true|target=example-custom-default|default=show}} {{Detail|Hidable content|target=example-custom-default}}
☑ Show details ☒ Show details
Hidable content
Custom hidable elements
{{Detail|button=true|target=example-custom-hidable-element}} <div {{Detail|target=example-custom-hidable-element}}>Hidden content</div>
☑ Show details ☒ Show details
Hidden content
Table
{{Detail|button=true|target=example-row|default=show|show_text=Show row|hide_text=Show row (hidden)}} {{Detail|button=true|target=example-column|show_text=Show column|hide_text=Show column (hidden)}} {| class="wikitable" |Normal row |... |{{Detail|target=example-column}}|Hidden column |- {{Detail|target=example-row}} |Hidable row |... |{{Detail|target=example-column}}|Hidden column |}
☑ Show row ☒ Show row (hidden)
☑ Show column ☒ Show column (hidden)
Normal row | ... | Hidden column |
Hidable row | ... | Hidden column |