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

From blackwiki
Jump to navigation Jump to search
imported>Ryan Vesey
(Fully clickable button)
 
imported>3125A
 
(4 intermediate revisions by 4 users not shown)
Line 1: Line 1:
{{#if: {{{full|}}}|<span style="cursor:pointer;" class="plainlinks">[{{fullurl:{{{link|}}}}}<span class="submit ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">{{{1|}}}</span></span>]</span> |<span class="submit ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">{{{1|}}}</span></span>}}
+
<span class="mw-ui-button {{#switch: {{{color|white}}} | red = mw-ui-destructive | green = mw-ui-constructive | white = | blue = mw-ui-progressive}}">{{{1|Button text}}}</span><noinclude>
 +
{{Documentation}}
 +
</noinclude>

Latest revision as of 15:13, 26 May 2020

Button text

50px Template documentation[view] [edit] [history] [purge]

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.

Usage

Unnamed parameters:

  • {{Clickable button | TEXT }}
  • {{Clickable button | TEXT | COLOR }}

Named parameters:

  • {{Clickable button | 1= TEXT }}
  • {{Clickable button | 1= TEXT | color= COLOR }}

Button with wikilink:

  • [[ WIKILINK | {{Clickable button | TEXT }} ]]
  • [[ WIKILINK | {{Clickable button | TEXT | color= COLOR }} ]]

Examples

Parameter: 1 (1)

Example: {{Clickable button|This looks like a button}}

Result: This looks like a button

Example: [[Talk:Main Page|{{Clickable button|Main page talk page}}]]

Result: Main page talk page

Parameter: color

You can select three colors: white (default), blue (progressive) and red (destructive):

White (Default) example: {{Clickable button|Button text|color=white}}

Result: Button text

Blue (Progressive) example: {{Clickable button|Button text|color=blue}}

Result: Button text

Red (Destructive) example: {{Clickable button|Button text|color=red}}

Result: Button text

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