doc

From Redazione
Jump to navigation Jump to search
m (1 revision imported)
Line 1: Line 1:
−
{{documentation subpage}}
+
{{tracked|T39744}}
−
<!-- Please place categories where indicated at the bottom of this page and interwikis at Wikidata (see [[Wikipedia:Wikidata]]) -->
+
{{TemplateBox
−
{{template shortcut|CLB|clickb}}
+
|1=target
−
{{High use| 10346 }}
+
|1d=The target page of the "button". For external links, however, it is recommended using the named parameter target. Please use named parameters if it is an external link because they often contain <code><nowiki>=</nowiki></code> which would confuse the parser.
−
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.
+
|1def=
 +
|1stat=required
 +
|1aliases=1
  
−
==Usage==
+
|3=text
−
Unnamed parameters:
+
|3d=Text (caption) the button should carry. Either you specify text or an icon.
−
* <code><nowiki>{{</nowiki>{{BASEPAGENAME}} | ''TEXT'' <nowiki>}}</nowiki></code>
+
|3def=
−
* <code><nowiki>{{</nowiki>{{BASEPAGENAME}} | ''TEXT'' | ''COLOR'' <nowiki>}}</nowiki></code>
+
|3stat=required
 +
|3aliases=2
  
−
Named parameters:
+
|5=external
−
* <code><nowiki>{{</nowiki>{{BASEPAGENAME}} | 1= ''TEXT'' <nowiki>}}</nowiki></code>
+
|5d=Is this an external link? If it is, set to yes or aye, or whatever you like, except nothing.
−
* <code><nowiki>{{</nowiki>{{BASEPAGENAME}} | 1= ''TEXT'' | color= ''COLOR'' <nowiki>}}</nowiki></code>
+
|5def=
 +
|5stat=optional
 +
|5aliases=3
  
−
Button with wikilink:
+
|7=iconPrimary
−
* <code><nowiki>[[ WIKILINK | {{</nowiki>{{BASEPAGENAME}} | ''TEXT'' <nowiki>}} ]]</nowiki></code>
+
|7d=A jquery UI icon class for the primary icon (in LTR languages on the left side of the button label/text). E.g. ''ui-icon-gear''[http://api.jqueryui.com/theming/icons/]
−
* <code><nowiki>[[ WIKILINK | {{</nowiki>{{BASEPAGENAME}} | ''TEXT'' | color= ''COLOR'' <nowiki>}} ]]</nowiki></code>
+
|7def=
 +
|7stat=optional-
 +
|7aliases=4
  
−
== Examples ==
+
|9=iconSecondary
 +
|9d=A jquery UI icon class for the secondary icon (in LTR languages on the right side of the button label/text). E.g. ''ui-icon-triangle-1-s''
 +
|9def=
 +
|9stat=optional-
 +
|9aliases=5
  
−
=== Parameter: 1 (1) ===
+
|11=class
 +
|11d=Add classes like <code> ui-button-green ui-button-large</code>
 +
|11def=
 +
|11stat=optional-
  
−
Example: <code><nowiki>{{Clickable button|This looks like a button}}</nowiki></code>
+
|13=id
−
: Result: {{Clickable button|This looks like a button}}
+
|13d=Unique id to be used as the button's ID-Attribute. Useful for JavaScript-binding and CSS-styling.
 +
|13def=
 +
|13stat=optional-
  
−
Example: <code><nowiki>[[Talk:Main Page|{{Clickable button|Main page talk page}}]]</nowiki></code>
+
|name=Clickable button
−
: Result: [[Talk:Main Page|{{Clickable button|Main page talk page}}]]
+
|desc=Provides a button with hover effects.
 +
|namespace=all
 +
|usergroup=all
 +
|placement=
 +
|usage-notes=
 +
----
 +
:<code><nowiki>{{Clickable button|FAQ|Frequently asked questions}}</nowiki></code> →
 +
::: {{Clickable button|FAQ|Frequently asked questions}}
 +
----
 +
: <code><nowiki>{{Clickable button|target={{fullurl:{{FULLPAGENAME}}|withJS=MediaWiki:VisualFileChange.js}}|text=This page with '''VisualFileChange'''|external=true}}</nowiki></code> →
 +
::: {{Clickable button|target={{fullurl:{{FULLPAGENAME}}|withJS=MediaWiki:VisualFileChange.js}}|text=This page with '''VisualFileChange'''|external=true}}
 +
----
 +
: <code><nowiki>{{Clickable button|:en:Wikipedia:Manual of Style/Layout|'''Wikipedia's manual of Style'''|class=ui-button-green ui-button-large}}</nowiki></code> →
 +
::: {{Clickable button|:en:Wikipedia:Manual of Style/Layout|'''Wikipedia's manual of Style'''|class=ui-button-green ui-button-large}}
 +
----
 +
: <code><nowiki>{{Clickable button|:en:Wikipedia:Twinkle/Preferences|'''Twinkle preferences'''|iconPrimary=ui-icon-wrench|class=ui-button-blue ui-button-large}}</nowiki></code> →
 +
::: {{Clickable button|:en:Wikipedia:Twinkle/Preferences|'''Twinkle preferences'''|iconPrimary=ui-icon-wrench|class=ui-button-blue ui-button-large}}
 +
----
 +
: <code><nowiki>{{Clickable button|target={{fullurl:Special:Random/User talk|action=edit&section=new&preloadtitle=I+love+your+work+because}}|text=Do something good|iconSecondary=ui-icon-heart|external=true|class=ui-button-red}}</nowiki></code> →
 +
::: {{Clickable button|target={{fullurl:Special:Random/User talk|action=edit&section=new&preloadtitle=I+love+your+work+because}}|text=Do something good|iconSecondary=ui-icon-heart|external=true|class=ui-button-red}}
 +
|type=formatting
 +
|example=
 +
|i18n-method=-
 +
|i18n-desc=
 +
|seealso=
 +
* {{tl|button}} (works without JS enabled)
 +
* {{tl|Clickable button 2}} (import from de.wikipedia)
 +
* {{tl|key press}}
 +
* {{tl|Clickable button 3}}
 +
|setscats=
 +
|lines=1
 +
|shorthand=
 +
|relieson=
 +
* [https://gerrit.wikimedia.org/r/gitweb?p=mediawiki/core.git;a=tree;f=resources/jquery.ui jquery.ui.button]
 +
}}
 +
== Test suite/ Unit tests ==
 +
<table>
 +
<tr><td>Icon only</td><td>{{Clickable button|iconPrimary=ui-icon-help}}</td><td>{{Clickable button|iconSecondary=ui-icon-help}}</td><td>{{Clickable button|iconSecondary=ui-icon-help|iconPrimary=ui-icon-info}}</td></tr>
 +
<tr><td>Icon text</td><td>{{Clickable button|iconPrimary=ui-icon-help|text=Abc}}</td><td>{{Clickable button|iconSecondary=ui-icon-help|text=Abc}}</td><td>{{Clickable button|iconSecondary=ui-icon-help|iconPrimary=ui-icon-info|text=Abc}}</td></tr>
 +
<tr><td>Text only, links</td><td>{{Clickable button|text=Abc}}</td><td>{{Clickable button|text=Abc|target=Main Page}}</td><td>{{Clickable button|text=Abc|target=//commons.wikimedia.org/wiki/Main_Page|external=1}}</td></tr>
 +
<tr><td>Colors</td><td>{{Clickable button|text=Abc|class=ui-button-green}}</td><td>{{Clickable button|text=Abc|class=ui-button-red}}</td><td>{{Clickable button|text=Abc|class=ui-button-blue}}</td></tr>
 +
</table>
  
−
=== Parameter: color ===
+
<includeonly>
−
You can select three colors: white (default), blue (progressive) and red (destructive):
+
<!-- Interwikis go on Wikidata, please add only Categories here -->
−
 
+
[[Category:Formatting templates]]
−
White (Default) example: <code><nowiki>{{Clickable button|Button text|color=white}}</nowiki></code>
+
</includeonly>
−
: Result: {{Clickable button|Button text|color=white}}
 
−
 
 
−
Blue (Progressive) example: <code><nowiki>{{Clickable button|Button text|color=blue}}</nowiki></code>
 
−
: Result: {{Clickable button|Button text|color=blue}}
 
−
 
 
−
Red (Destructive) example: <code><nowiki>{{Clickable button|Button text|color=red}}</nowiki></code>
 
−
: Result: {{Clickable button|Button text|color=red}}
 
−
 
 
−
'''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>.
 
−
 
 
−
{{Button templates}}
 
−
 
 
−
<includeonly>{{Sandbox other||
 
−
<!-- Categories below this line, please; interwikis at Wikidata -->
 
−
[[Category:Wikipedia formatting and function templates]]
 
−
[[Category:Wikipedia button templates]]
 
−
 
 
−
}}</includeonly>
 

Revision as of 11:47, 23 June 2021

Lua error in Module:TNT at line 159: Missing JsonConfig extension; Cannot load https://commons.wikimedia.org/wiki/Data:I18n/Tracked.tab.
Lua error in Module:TNT at line 159: Missing JsonConfig extension; Cannot load https://commons.wikimedia.org/wiki/Data:I18n/Tracked.tab.

Lua error: expandTemplate: invalid title "Template:TemplateBox/i18n/Template:Fallback".

Test suite/ Unit tests

Icon onlyButton textButton textButton text
Icon textButton textButton textButton text
Text only, linksButton textButton textButton text
ColorsButton textButton textButton text


Retrieved from "https://culturaitaliana.org/w/index.php?title=Template:Clickable_button/doc&oldid=11415"