- 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 (12 revisions imported) |
|||
| (8 intermediate revisions by one other user not shown) | |||
| Line 1: | Line 1: | ||
| − | <includeonly>{{#if:{{{button|}}}|<div class="toggle" data-target="{{{target|default}}}" data-default="{{{default|hide}}}"> | + | <includeonly>{{#if:{{{button|}}}|<div class="toggle" data-target="{{{target|default}}}" data-default="{{{default|hide}}}" {{#if:{{{classes|}}}|data-classes="{{{classes}}}"}}> |
<span class="toggle-show" style="{{{show_style|cursor:pointer;color:#006cb0;}}}">☑ {{{show_text|Show details}}}</span> | <span class="toggle-show" style="{{{show_style|cursor:pointer;color:#006cb0;}}}">☑ {{{show_text|Show details}}}</span> | ||
<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]] functions. | + | This is a helper template for using [[MediaWiki:DetailToggle.js]] functions, it allows to have arbitrary hidable content that can be toggled with (pseudo) buttons, with current states saved in browser's [https://en.wikipedia.org/wiki/Web_storage#Local_and_session_storage local storage]. |
==Parameters== | ==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> | *'''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 | + | *'''button''': set to generate a toggle button |
**'''default''': <code>hide</code> or <code>show</code>, to hide or show hidable content by default; defaults to <code>hide</code> | **'''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> | **'''show_style''': button style when showing hidable content; defaults to <code>cursor:pointer;color:#006cb0;</code> | ||
| Line 12: | Line 12: | ||
**'''show_text''': button text when showing hidable content; defaults to <code>Show details</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> | **'''hide_text''': button text when not showing hidable content; defaults to <code>Show details</code> | ||
| − | *Without '''button''' a class for hidable element will be | + | *Without '''button''' parameter a class for hidable element will be generated |
**'''[[[1]]]''': hidable content in a <code>span</code> element | **'''[[[1]]]''': hidable content in a <code>span</code> element | ||
==Examples== | ==Examples== | ||
| Line 25: | Line 25: | ||
<pre> | <pre> | ||
{{Detail|button=true|target=example-custom-property}} | {{Detail|button=true|target=example-custom-property}} | ||
| − | {{Detail | + | {{Detail|target=example-custom-property|Hidden content}} |
</pre> | </pre> | ||
{{Detail|button=true|target=example-custom-property}} | {{Detail|button=true|target=example-custom-property}} | ||
| − | {{Detail | + | {{Detail|target=example-custom-property|Hidden content}} |
===Showing details by default=== | ===Showing details by default=== | ||
<pre> | <pre> | ||
| Line 49: | Line 49: | ||
{| class="wikitable" | {| 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 | |Hidable row | ||
| − | |||
|{{Detail|target=example-column}}|Hidden column | |{{Detail|target=example-column}}|Hidden column | ||
|} | |} | ||
| Line 61: | Line 59: | ||
{| class="wikitable" | {| 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 | |Hidable row | ||
| − | |||
|{{Detail|target=example-column}}|Hidden column | |{{Detail|target=example-column}}|Hidden column | ||
|} | |} | ||
| + | ===Additional classes=== | ||
| + | Instead of toggling visibility toggles can add and remove custom classes from targets. | ||
| + | {{Detail|button=true|target=ship-cg-to-blur|show_text=Blur image|hide_text=Blur image|classes=blur}} | ||
| + | <div {{Detail|target=ship-cg-to-blur}}> | ||
| + | {{ShipGraphicKai|Maestrale/Christmas}} | ||
| + | </div> | ||
| + | <div class="toggle toggle-target-ship-cg-to-blur-2" data-target="ship-cg-to-blur-2" data-default="hide" data-classes="blur"> | ||
| + | {{ShipGraphicKai|Maestrale/Christmas|link=false}} | ||
| + | </div> | ||
</noinclude> | </noinclude> | ||
Latest revision as of 12:24, 25 January 2021
This is a helper template for using MediaWiki:DetailToggle.js functions, it allows to have arbitrary hidable content that can be toggled with (pseudo) buttons, with current states saved in browser's local storage.
Parameters
- target: property name for hidable elements,
toggle-target-targetwill be used as a class and a local storage key; defaults todefault - button: set to generate a toggle button
- default:
hideorshow, 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 parameter a class for hidable element will be generated
- [[[1]]]: hidable content in a
spanelement
- [[[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-property|Hidden content}}
☑ Show details ☒ Show details
Hidden content
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 |
Additional classes
Instead of toggling visibility toggles can add and remove custom classes from targets.
☑ Blur image ☒ Blur image
