Difference between revisions of "Template:Clickable button 2"

From blackwiki
Jump to navigation Jump to search
imported>Technical 13
(Allow custom styling on pages that aren't selflinks)
imported>Jackmcbarn
(condense style code)
Line 2: Line 2:
 
  |{{{url}}}
 
  |{{{url}}}
 
  |[{{{1|}}}{{!}}
 
  |[{{{1|}}}{{!}}
}}<span class="{{#switch:{{lc:{{{class|}}}}}|ui-button-green|ui-button-blue|ui-button-red=submit ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-button-text|#default=mw-ui-button}} {{{class|}}}" role="button" aria-disabled="false" {{#ifeq:{{FULLPAGENAME:{{{1}}}}}|{{FULLPAGENAME}}|style="cursor: default;
+
}}<span class="{{#switch:{{lc:{{{class|}}}}}|ui-button-green|ui-button-blue|ui-button-red=submit ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-button-text|#default=mw-ui-button}} {{{class|}}}" role="button" aria-disabled="false" style="{{#ifeq:{{FULLPAGENAME:{{{1}}}}}|{{FULLPAGENAME}}|cursor: default;
 
  {{#switch:{{{class|}}}
 
  {{#switch:{{{class|}}}
 
   | ui-button-blue | mw-ui-progressive = background-color: #2962CB;
 
   | ui-button-blue | mw-ui-progressive = background-color: #2962CB;
Line 8: Line 8:
 
   | ui-button-red | mw-ui-destructive = background-color: #A6170F;
 
   | ui-button-red | mw-ui-destructive = background-color: #A6170F;
 
   | #default = background-color: #CCC; color: #666;
 
   | #default = background-color: #CCC; color: #666;
  }} {{{style|}}}"
+
  }}}} {{{style|}}}">{{#if:{{{url|}}}
|style="{{{style|}}}"}}>{{#if:{{{url|}}}
 
 
  |{{#if:{{{1|}}}
 
  |{{#if:{{{1|}}}
 
   |{{{1}}}
 
   |{{{1}}}

Revision as of 00:44, 27 February 2014

[[|]]

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

This template styles a link like a button, using the mediawiki.ui.button module. This expands the clickable area and tap target for the link. It can be used in the following ways,

  • Code: {{Clickable button 2|Main Page}}
  • Code: {{Clickable button 2|Main Page|Cover page}}
  • Code: {{Clickable button 2|Main Page|url=http://en.wikipedia.org}}
  • Code: {{Clickable button 2|Main Page|class=mw-ui-destructive}}
  • Code: {{Clickable button 2|Main Page|class=mw-ui-progressive}}

Note: After the changes outlined in Phabricator task T110555 were implemented, {{Clickable button 2|Main Page|class=mw-ui-constructive}} produces the same output as {{Clickable button 2|Main Page|class=mw-ui-progressive}}.

Template data

Styles a link like a button, using the mediawiki.ui.button module

Template parameters

This template prefers inline formatting of parameters.

ParameterDescriptionTypeStatus
Link/Label1

Defines the page to link to, and uses that page's title as the text for the button

Example
Foobar
Pagerequired
Label2

Defines the text that appears on the button

Unknownsuggested
URLurl

Defines a web address for the button to link to

Example
https://www.example.com
URLoptional
Classclass

Defines the visual type of the button

Example
mw-ui-progressive, mw-ui-destructive
Stringoptional
Stylestyle

no description

Stringoptional
Categorycategory

no description

Booleanoptional

See also