Template:Clickable button 2: Difference between revisions

Content added Content deleted

Inline

Revision as of 01:56, 14 February 2014

[[|]]

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

This is a documentation subpage for Template:Clickable button 2.
It contains usage information, categories and other content that is not part of the original template page.

This template uses Lua:

Module:Clickable button 2

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}}
- Result: Main Page
Code: {{Clickable button 2|Main Page|Cover page}}
- Result: Cover page
Code: {{Clickable button 2|Main Page|url=http://en.wikipedia.org}}
- Result: Main Page
Code: {{Clickable button 2|Main Page|class=mw-ui-destructive}}
- Result: Main Page
Code: {{Clickable button 2|Main Page|class=mw-ui-progressive}}
- Result: Main Page

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}}.

The above documentation is transcluded from Template:Clickable button 2/doc. (edit | history)
Editors can experiment in this template's sandbox (create | mirror) and testcases (create) pages.
Please add categories to the /doc subpage. Subpages of this template.

@@ Line 2: / Line 2: @@
  |{{{url}}}
  |[{{{1|}}}{{!}}
-}}<span class="mw-ui-button {{{class|}}}" role="button" aria-disabled="false" {{#ifeq:{{{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" {{#ifeq:{{{1}}}|{{FULLPAGENAME}}|style="cursor: default;
- {{#switch:{{{class}}}
+ {{#switch:{{{class|}}}
-  | mw-ui-progressive = background-color: #2962CB;
+  | ui-button-blue | mw-ui-progressive = background-color: #2962CB;
-  | mw-ui-constructive = background-color: #008B6D;
+  | ui-button-green | mw-ui-constructive = background-color: #008B6D;
-  | mw-ui-destructive = background-color: #A6170F;
+  | ui-button-red | mw-ui-destructive = background-color: #A6170F;
   | #default = background-color: #CCC; color: #666;
  }}"
@@ Line 13: / Line 13: @@
   |{{{1}}}
   |{{{url}}}
- }}</span>|{{#if:{{{2|}}}|{{{2|}}}|{{{1|}}}}}</span>]
+ }}{{#switch:{{lc:{{{class}}}}}|ui-button-green|ui-button-blue|ui-button-red=[[Category:Pages using old style ui-button-color]]|#default=}}</span>|{{#if:{{{2|}}}|{{{2|}}}|{{{1|}}}}}</span>]
 }}]</span><noinclude>
 {{Documentation}}