Difference between revisions of "Template:Clickable button/doc"

From blackwiki
Jump to navigation Jump to search
imported>Matt Fitzpatrick
(removed {{used in system}} tag, this template appears to have 0 transclusions in MediaWiki namespace Special:WhatLinksHere/Template:Clickable button)
imported>Matt Fitzpatrick
(rewrite as it's technically not a button, has to go inside a wikilink to expand mobile tap target; closed LISTGAPs)
Line 1: Line 1:
 
{{template shortcut|CLB|clickb}}
 
{{template shortcut|CLB|clickb}}
This template creates a clickable button. There are two editable parameters. The first one, an unnamed one, is used to create the text of the button.  It can support wikilinks.
+
This template creates an area with the visual appearance of a button. This area can be placed inside a wikilink to give the link the appearance of a button, and expand its clickable size and tap target.
 +
 
 +
There are two editable parameters. The first one, an unnamed one, sets the text inside the area.
  
 
Examples:
 
Examples:
  
:<code><nowiki>{{Clickable button|This is a button}}</nowiki></code>
+
* <code style="display: block;"><nowiki>{{Clickable button|This looks like a button}}</nowiki></code> produces {{Clickable button|This looks like a button}}
produces {{Clickable button|This is a button}}<br/>
+
* <code style="display: block;"><nowiki>[[Talk:Main page|{{Clickable button|Main page talk page}}]]</nowiki></code> produces [[Talk:Main page|{{Clickable button|Main page talk page}}]]
 
 
:<code><nowiki>{{Clickable button|[[Talk:Main page|Main page talk page]]}}</nowiki></code>
 
produces {{Clickable button|[[Talk:Main page|Main page talk page]]}}<br/>
 
  
The other one, named "color", allows you to change the color of the button. You can select between three colors: white (default), blue and red.
+
The other one, named "color", allows you to change the color of the area. You can select between three colors: white (default), blue and red.
  
To change the color of a button, you have to add the color parameter followed by the color name, like this: <code><nowiki>{{clickable button|Text|color=blue}}</nowiki></code>.
+
To change the color of the area, you have to add the color parameter followed by the color name, like this: <code><nowiki>{{clickable button|Text|color=blue}}</nowiki></code>.
  
 
Examples:
 
Examples:
  
*white (default):
+
*white (default):<br />{{Clickable button|color=white}}
 
+
*blue aka. progressive:<ref group="note">After the changes outlined in Phabricator task {{Phab|T110555}} were implemented, <code><nowiki>{{Clickable button|color=green}}</nowiki></code> produces the same output as <code><nowiki>{{Clickable button|color=blue}}</nowiki></code>.</ref><br />{{Clickable button|color=blue}}
{{Clickable button|color=white}}
+
*red aka. destructive:<br />{{Clickable button|color=red}}
 
 
*blue aka. progressive:<ref group="note">After the changes outlined in Phabricator task {{Phab|T110555}} were implemented, <code><nowiki>{{Clickable button|color=green}}</nowiki></code> produces the same output as <code><nowiki>{{Clickable button|color=blue}}</nowiki></code>.</ref>
 
 
 
{{Clickable button|color=blue}}
 
 
 
*red aka. destructive:
 
 
 
{{Clickable button|color=red}}
 
  
 
==Notes==
 
==Notes==

Revision as of 21:02, 13 October 2017

This template creates an area with the visual appearance of a button. This area can be placed inside a wikilink to give the link the appearance of a button, and expand its clickable size and tap target.

There are two editable parameters. The first one, an unnamed one, sets the text inside the area.

Examples:

  • {{Clickable button|This looks like a button}} produces This looks like a button
  • [[Talk:Main page|{{Clickable button|Main page talk page}}]] produces Main page talk page

The other one, named "color", allows you to change the color of the area. You can select between three colors: white (default), blue and red.

To change the color of the area, you have to add the color parameter followed by the color name, like this: {{clickable button|Text|color=blue}}.

Examples:

  • white (default):
    Button text
  • blue aka. progressive:[note 1]
    Button text
  • red aka. destructive:
    Button text

Notes

  1. After the changes outlined in Phabricator task T110555 were implemented, {{Clickable button|color=green}} produces the same output as {{Clickable button|color=blue}}.