• 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"

From Kancolle Wiki
Jump to navigation Jump to search
m (12 revisions imported)
 
(10 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]].
+
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==
 +
*'''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 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>
 +
**'''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''' parameter a class for hidable element will be generated
 +
**'''[[[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-1}}
+
{{Detail|button=true|target=example-custom-property}}
−
{{Detail||target=example-1|Hidden content}}
+
{{Detail|target=example-custom-property|Hidden content}}
 
</pre>
 
</pre>
−
{{Detail|button=true|target=example-1}}
+
{{Detail|button=true|target=example-custom-property}}
−
{{Detail|target=example-1|Hidden content}}
+
{{Detail|target=example-custom-property|Hidden content}}
−
===Custom elements===
+
===Showing details by default===
 
<pre>
 
<pre>
−
{{Detail|button=true|target=example-2}}
+
{{Detail|button=true|target=example-custom-default|default=show}}
−
<div {{Detail|target=example-2}}>Hidden content</div>
+
{{Detail|Hidable content|target=example-custom-default}}
 
</pre>
 
</pre>
−
{{Detail|button=true|target=example-2}}
+
{{Detail|button=true|target=example-custom-default|default=show}}
−
<div {{Detail|target=example-2}}>Hidden content</div>
+
{{Detail|Hidable content|target=example-custom-default}}
−
===Tables & custom text===
+
===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}}
−
|Hidden row
+
|Hidable row
−
|...
 
 
|{{Detail|target=example-column}}|Hidden column
 
|{{Detail|target=example-column}}|Hidden column
 
|}
 
|}
 
</pre>
 
</pre>
−
{{Detail|button=true|target=example-row|show_text=Show row|hide_text=Show row (hidden)}}
+
{{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}}
−
|Hidden 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-target will be used as a class and a local storage key; defaults to default
  • button: set to generate a toggle button
    • default: hide or show, to hide or show hidable content by default; defaults to hide
    • 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
  • Without button parameter a class for hidable element will be generated
    • [[[1]]]: hidable content in a span element

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

File:Ship Full Maestrale Christmas.png

File:Ship Full Maestrale Christmas.png

Retrieved from "https://en.kancollewiki.net/w/index.php?title=Template:Detail&oldid=81618"