Template

Difference between revisions of "Clickable button 2/doc"

< Template:Clickable button 2
meta>Paine Ellsworth
m (update /doc)
m (1 revision imported)
 
(One intermediate revision by the same user not shown)
Line 1: Line 1:
−
{{Documentation subpage}}
+
{{TemplateBox
−
{{High-risk| 586256 }}
+
|name = Clickable button 2
−
{{Used in system}}
 
−
{{template shortcut|CLB2}}
 
−
{{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,
+
|desc-de = Diese Vorlage erlaubt es, auf einfache Weise (ohne HTML- oder CSS-Kenntnisse) Schaltflächen (Buttons) zu erstellen, welche die Verlinkung beliebiger Inhalte auf Wikipedia, sowie auf externen Seiten erlauben. Damit können z.B. Projekt- und Benutzerseiten visuell ansprechend präsentiert werden.
  
−
*'''Code: '''<code><nowiki>{{Clickable button 2|Main Page}}</nowiki></code>
+
Zur grafischen Gestaltung stehen viele vordefinierte Icons zur Verfügung, alternativ können beliebige lokal gespeicherte oder auf Commons verfügbare Grafiken eingebunden werden. Weiterhin stellt die Vorlage drei verschiedene Farbschemata in mehreren Variationen zur Verfügung. Der Linktext kann beliebig mit Wikitext und/oder HTML/CSS gestaltet werden.
−
**'''Result: '''{{Clickable button 2|Main Page}}
+
|desc-en = This template allows creating buttons that link to Commons-internal pages, or external pages without HTML and CSS knowledge. Project or user pages can be visually enhanced using this button, for example.
−
*'''Code: '''<code><nowiki>{{Clickable button 2|Main Page|Cover page}}</nowiki></code>
 
−
**'''Result: '''{{Clickable button 2|Main Page|Cover page}}
 
−
*'''Code: '''<code><nowiki>{{Clickable button 2|Main Page|url=http://en.wikipedia.org}}</nowiki></code>
 
−
**'''Result: '''{{Clickable button 2|Main Page|url=http://en.wikipedia.org}}
 
−
*'''Code: '''<code><nowiki>{{Clickable button 2|Main Page|class=mw-ui-destructive}}</nowiki></code>
 
−
**'''Result: '''{{Clickable button 2|Main Page|class=mw-ui-destructive}}
 
−
*'''Code: '''<code><nowiki>{{Clickable button 2|Main Page|class=mw-ui-progressive}}</nowiki></code>
 
−
**'''Result: '''{{Clickable button 2|Main Page|class=mw-ui-progressive}}
 
  
−
'''Note: '''After the changes outlined in Phabricator task {{Phab|T110555}} were implemented, <code><nowiki>{{Clickable button 2|Main Page|class=mw-ui-constructive}}</nowiki></code> produces the same output as <code><nowiki>{{Clickable button 2|Main Page|class=mw-ui-progressive}}</nowiki></code>.
+
A bunch of predefined icons and, additionally any graphic hosted at Wikimedia Commons can be included to further enhance the User Experience (UX). On top of that, the template provides 3 different color schemas, each of them with different variants. The link text can be customized using wiki text and/or HTML/CSS.
  
−
=== Template data ===
 
−
<templatedata>
 
−
{
 
−
"params": {
 
−
"1": {
 
−
"required": true,
 
−
"label": "Link/Label"
 
−
},
 
−
"2": {
 
−
"suggested": true,
 
−
"label": "Label"
 
−
},
 
−
"url": {
 
−
"type": "url",
 
−
"label": "URL"
 
−
},
 
−
"class": {
 
−
"type": "string",
 
−
"autovalue": ""
 
−
},
 
−
"style": {
 
−
"type": "string"
 
−
},
 
−
"category": {
 
−
"type": "boolean"
 
−
}
 
−
},
 
−
"description": "Styles a link like a button, using the mediawiki.ui.button module",
 
−
"format": "inline"
 
−
}
 
−
</templatedata>
 
  
−
=== See also ===
+
|1 = link
−
* [[commons:Template:Clickable button]], corresponding clickable button at Commons.
+
|1aliases = 1
 +
|1d-de  = Gibt das Linkziel an. Erlaubt ist
 +
* entweder ein Wikilink (ohne die doppelten Klammern <code><nowiki>[[&hellip;]]</nowiki></code>), z.B. einfach <code>"link = Wikipedia"</code> um auf die Seite der [[Wikipedia]]-Galerie zu gelangen, oder
 +
* ein externer Link (ohne die einfachen Klammern <code><nowiki>[&hellip;]</nowiki></code>), z.B. einfach <code><nowiki>"link = https://test.de"</nowiki></code> um auf https://test.de zu verlinken.
 +
|1d-td-de  = Gibt das Linkziel an. Erlaubt ist
 +
* entweder ein Wikilink (ohne die doppelten Klammern <code><nowiki>[[&hellip;]]</nowiki></code>), z.B. einfach <code>"link = Wikipedia"</code> um auf die Seite der Wikipedia-Galerie zu gelangen, oder
 +
* ein externer Link (ohne die einfachen Klammern <code><nowiki>[&hellip;]</nowiki></code>), z.B. einfach <code><nowiki>"link = https://test.de"</nowiki></code> um auf https://test.de zu verlinken.
 +
|1d-en = Specifies the link target:
 +
* Either a wiki link (without double square brackets <code><nowiki>[[&hellip;]]</nowiki></code>), e.g. simply <code>"link = Wikipedia"</code> for a link to the [[Wikipedia]] gallery page, or
 +
* an external link (without the square brackets <code><nowiki>[&hellip;]</nowiki></code>), e.g. simply <code><nowiki>"link = https://example.com"</nowiki></code> for a link to https://example.com.
 +
|1d-td-en = Specifies the link target:
 +
* Either a wiki link (without double square brackets <code><nowiki>[[&hellip;]]</nowiki></code>), e.g. simply <code>"link = Wikipedia"</code> for a link to the Wikipedia gallery page, or
 +
* an external link (without the square brackets <code><nowiki>[&hellip;]</nowiki></code>), e.g. simply <code><nowiki>"link = https://example.com"</nowiki></code> for a link to https://example.com.
 +
|1def=Main Page
 +
|1type = string/wiki-page-name
 +
|1stat = required
  
−
{{Button templates}}
+
|2 = text
−
<includeonly>{{#ifeq:{{SUBPAGENAME}}|sandbox||
+
|2aliases = 2
−
<!-- Categories and interwikis go here: -->
+
|2d-de = Der Text, den der Button enthalten soll.<br />Der Linktext kann beliebig mit Wikitext und/oder HTML/CSS gestaltet werden.<br />Es ist auch eine leere Angabe <code><nowiki>text=</nowiki></code> möglich, wenn der Button nur ein Icon oder Bild enthalten soll.
−
[[Category:Wikipedia formatting and function templates]]
+
|2d-en = The text the button should display.<br />Can be customized using wiki text and/or HTML/CSS.<br />Also an empty text parameter <code><nowiki>text=</nowiki></code> is permitted if only a graphic or an icon should be displayed.
−
[[Category:Wikipedia button templates]]
+
|2def = Button
 +
|2type = string
 +
|2stat = optional
  
−
}}</includeonly>
+
|3 = title
 +
|3aliases = Titel
 +
|3d-de = Der Text, welcher als Tooltip erscheinen soll.<br />Standardmäßig wird der Seitentitel (Wikilink) bzw. die URL (externer Link) angezeigt.
 +
|3d-en = Text for the tooltip. By default the page title (wiki links) or the URL (external inks) is displayed.
 +
|3def = (link target)
 +
|3type = string
 +
|3stat = optional-
 +
 
 +
|4 =icon
 +
|4d-de = Der Name eines vordefinierten Icons, welches auf dem Button erscheinen soll (z.B. <code>"icon = refresh"</code> für <span class="ui-icon ui-icon-refresh" style="display:inline-block;vertical-align:text-bottom;">&nbsp;</span>)<br />''[[#icons|→ Liste der Icons]]''
 +
|4d-td-de = Der Name eines vordefinierten Icons, welches auf dem Button erscheinen soll (z.B. <code>"icon = refresh"</code> für <span class="ui-icon ui-icon-refresh" style="display:inline-block;vertical-align:text-bottom;">&nbsp;</span>)<br />Siehe Liste der Icons in der Dokumentation dieser Vorlage.
 +
|4d-en = Name of a pre-defined icon, which should be shown on the button (e.g. <code>"icon = refresh"</code> for <span class="ui-icon ui-icon-refresh" style="display:inline-block;vertical-align:text-bottom;">&nbsp;</span>)<br />''[[#icons|→ Icon list]]''
 +
|4d-td-en = Name of a pre-defined icon, which should be shown on the button (e.g. <code>"icon = refresh"</code> for <span class="ui-icon ui-icon-refresh" style="display:inline-block;vertical-align:text-bottom;">&nbsp;</span>)<br />See icon list in documentation of this template.
 +
|4type = string
 +
|4stat = optional-
 +
 
 +
|5 = image
 +
|5aliases = Bild
 +
|5d-de = Ein auf Commons vorhandenes Bild, welches auf dem Button angezeigt werden soll.<br />Die Einbindung erfolgt inklusive Größenangabe mit Wikisyntax (z.B. <code><nowiki>image = [[File:checkmark.svg|16px]]</nowiki></code> für [[File:checkmark.svg|16px|link=|middle]]).
 +
|5d-td-de = Ein auf Commons vorhandenes Bild, welches auf dem Button angezeigt werden soll.<br />Die Einbindung erfolgt inklusive Größenangabe mit Wikisyntax (z.B. <code><nowiki>image = [[File:checkmark.svg|16px]]</nowiki></code>).
 +
|5d-en = A file on Commons and its dimensions. Inclusion using Wiki-Syntax (e.g. <code><nowiki>image = [[File:checkmark.svg|16px]]</nowiki></code> for [[File:checkmark.svg|16px|link=|middle]]).
 +
|5d-td-en = A file on Commons and its dimensions. Inclusion using Wiki-Syntax (e.g. <code><nowiki>image = [[File:checkmark.svg|16px]]</nowiki></code>).
 +
|5type = string
 +
|5stat = optional-
 +
 
 +
|6 = color
 +
|6aliases = Farbe
 +
|6d-de = Gibt ein Farbschema für den Button vor (z.B. <code>"color = blue"</code>).<br />Mögliche Werte sind <code>rot/red/blau/blue/grün/green</code>, <code>rot2/red2/blau2/blue2/grün2/green2</code> sowie <code>rot3/red3/blau3/blue3/grün3/green3</code> (siehe [[#colors|Abschnitt]] in den Verwendungshinweisen).
 +
|6d-td-de = Gibt ein Farbschema für den Button vor (z.B. <code>"color = blue"</code>).<br />Mögliche Werte sind <code>rot/red/blau/blue/grün/green</code>, <code>rot2/red2/blau2/blue2/grün2/green2</code> sowie <code>rot3/red3/blau3/blue3/grün3/green3</code> (siehe entsprechenden Abschnitt in den Verwendungshinweisen).
 +
|6d-en = Specifies the color-scheme for the button (z.B. <code>"color = blue"</code>).<br />Possible values are <code>red/blue/green</code>, <code>red2/blue2/green2</code>, and also <code>red3/blue3/green3</code> or their German counterparts (see [[#colors|section]] in usage notes).
 +
|6d-td-en = Specifies the color-scheme for the button (z.B. <code>"color = blue"</code>).<br />Possible values are <code>red/blue/green</code>, <code>red2/blue2/green2</code>, and also <code>red3/blue3/green3</code> or their German counterparts (see regarding section in usage notes).
 +
|6type = string
 +
|6stat = optional-
 +
 
 +
|7 = padding
 +
|7d-de = Gibt den Abstand zwischen Inhalt (Text, Bild, Icon) und dem Rand des Buttons an.<br /><code>"padding = 5px"</code> ergibt fünf Pixel breite Ränder auf allen Seiten. Werden zwei Werte angegeben (<code>"padding = 5px 5px"</code>) gelten diese für oben/unten bzw. links/rechts, Werden vier Werte angegeben (<code>"padding = 5px 5px 5px 5px"</code>) gelten diese für oben, rechts, unten bzw. links in dieser Reihenfolge.
 +
|7d-en = Specifies the padding between content (text, graphic, icon) and border of the button. If one value is given it coubts for all sides, Two values are for top/bottom and left/right respectively. Four values count for top, right, bottom and left in this order (e.g. <code>"padding = 5px 15px 10px 20px"</code>).
 +
|7def = 0.25em 0.5em
 +
|7type = string
 +
|7stat = optional-
 +
 
 +
|namespace = all
 +
|usergroup = all
 +
|usage-notes =
 +
|type = formatting
 +
|example = link=Main page&#124;text=Link to Main Page
 +
|example-value = {{Clickable button 2|link=Main page|text=Link to Main Page}}
 +
|i18n-method = -
 +
|seealso =
 +
* {{tl|Button}} - just using CSS.
 +
* {{tl|Clickable button}} - previous attempt.
 +
|setscats =
 +
|print = one
 +
|relieson =
 +
* [[Module:FileUtil]]
 +
* [[Module:URLutil]]
 +
|useTemplateData = 1
 +
}}
 +
 
 +
== {{anchor|Verwendungshinweise}}{{anchor|Usage notes}}<!--
 +
-->{{LangSwitch
 +
|de=Verwendungshinweise
 +
|en=Usage notes
 +
}} ==
 +
 
 +
=== {{anchor|Grundlegende Verwendung}}<!--
 +
-->{{anchor|Basic usage}}<!--
 +
-->{{LangSwitch
 +
|de=Grundlegende Verwendung
 +
|en=Basic usage
 +
}} ===
 +
 
 +
<ul>
 +
<li>
 +
'''Wikilinks, Interwikilinks {{and}} external links:'''<br />
 +
<code><nowiki>{{Clickable button 2|link=Wikipedia|text=</nowiki>{{LangSwitch |de=Link zur Wikipedia-Galerie |en=Link to Wikipedia Gallery}} <nowiki>}}</nowiki></code><br />
 +
{{Clickable button 2|link=Wikipedia|text={{LangSwitch |de=Link zur Wikipedia-Galerie |en=Link to Wikipedia Gallery}} }}<br />
 +
<code><nowiki>{{Clickable button 2|link=:en:Wikipedia|text=</nowiki>{{LangSwitch |de=Link zum Artikel <nowiki>''Wikipedia''</nowiki> in der englischen Wikipedia |en=Link to article <nowiki>''Wikipedia''</nowiki> in English Wikpedia}} <nowiki>}}</nowiki></code><br />
 +
{{Clickable button 2|link=:en:Wikipedia|text={{LangSwitch |de=Link zum Artikel ''Wikipedia'' in der englischen Wikipedia |en=Link to article ''Wikipedia'' in English Wikipedia}} }}<br />
 +
<code><nowiki>{{Clickable button 2|link=https://example.com|text=</nowiki>{{LangSwitch |de=Link zu |en=Link to}} <nowiki><kbd>https://example.com</kbd>}}</nowiki></code><br />
 +
{{Clickable button 2|link=https://example.com|text={{LangSwitch |de=Link zu |en=Link to}} <kbd>https://example.com</kbd>}}
 +
</li>
 +
 
 +
<li>
 +
'''{{LangSwitch
 +
|de=Die notwendigen Parameter<code>"link"</code> und <code>"text"</code> können benannte oder unbenannte Parameter sein:
 +
|en=Required parameters <code>"link"</code> and <code>"text"</code> may be named parameters or unnamed params:
 +
}}'''<br />
 +
<code><nowiki>{{Clickable button 2|Wikipedia|Wikipedia-Galerie}}</nowiki></code> {{i18n/or}}<br />
 +
<code><nowiki>{{Clickable button 2|1=Wikipedia|2=Wikipedia-Galerie}}</nowiki></code> {{i18n/or}}<br />
 +
<code><nowiki>{{Clickable button 2|link=Wikipedia|text=Wikipedia-Galerie}}</nowiki></code><br />
 +
{{Clickable button 2|Wikipedia|Wikipedia-Galerie}}
 +
</li>
 +
 
 +
<li>
 +
'''Tooltips:'''<br />
 +
<code><nowiki>{{Clickable button 2|link=:en:Wikipedia|text=''Wikipedia''|title=</nowiki>{{LangSwitch |de=Link zum Artikel über die Wikipedia in der englischen Wikipedia |en=Link to article about Wikipedia in English Wikipedia}}<nowiki>&amp;nbsp;:-) }}</nowiki></code><br />
 +
{{Clickable button 2|link=:en:Wikipedia|text=''Wikipedia''|title={{LangSwitch |de=Link zum Artikel über die Wikipedia in der englischen Wikipedia |en=Link to article about Wikipedia in English Wikipedia}}&nbsp;:-) }}<!--
 +
--> ''← {{LangSwitch
 +
|de=Bitte mit der Maus auf die Schaltfläche gehen.
 +
|en=Please hover the button.
 +
}}''
 +
</li>
 +
</ul>
 +
 
 +
=== {{anchor|Fortgeschrittene Verwendung (URL-Parameter)}}<!--
 +
-->{{anchor|Advanced usage (URL parameters)}}<!--
 +
-->{{LangSwitch
 +
|de=Fortgeschrittene Verwendung (URL-Parameter)
 +
|en=Advanced usage (URL parameters)
 +
}} ===
 +
 
 +
{{LangSwitch
 +
|de=Um URL-Parameter angeben zu können, müssen auch Wikilinks in „externe“ URL umgewandelt werden. Diese können von Hand zusammengesetzt werden, einfacher und zuverlässiger geht es aber mit der
 +
|en=To be able to specify URL parameters, also Wikilinks must be converted to "external" URLs. These can be assembled by hand, but it's easier and more reliable with the
 +
}} [[:mw:Special:MyLanguage/Help:Magic words#Parser functions|<!--
 +
-->{{LangSwitch
 +
|de=Parserfunktion
 +
|en=parser function
 +
}}]] <code><nowiki>{{fullurl}}</nowiki></code>.
 +
 
 +
{{LangSwitch
 +
|de=Beispielsweise liefert
 +
|en=For instance yields
 +
}}
 +
* {{LangSwitch
 +
|de=<code><nowiki>{{fullurl:Hauptseite}}</nowiki></code> die volle URL der Hauptseite: <code>{{fullurl:Hauptseite}}</code>
 +
|en=<code><nowiki>{{fullurl:Main Page}}</nowiki></code> the full URL of the main page: <code>{{fullurl:Main Page}}</code>
 +
}}
 +
* <code><nowiki>{{fullurl:{{FULLPAGENAME}}}}</nowiki></code> <!--
 +
-->{{LangSwitch
 +
|de=die volle URL der aktuellen Seite:
 +
|en=the full URL of current page:
 +
}} <code>{{fullurl:{{FULLPAGENAME}}}}</code>
 +
 
 +
{{LangSwitch
 +
|de=Über den ersten Parameter von <code><nowiki>{{fullurl}}</nowiki></code> können URL-Parameter an die URL angehängt werden:
 +
|en=The first parameter of <code><nowiki>{{fullurl}}</nowiki></code> can be used to append URL parameters to the URL:
 +
}}
 +
*<code><nowiki>{{fullurl:Hauptseite|action=purge}}</nowiki></code> → <code>{{fullurl:Hauptseite|action=purge}}</code>
 +
*<code><nowiki>{{fullurl:{{FULLPAGENAME}}|action=purge}}</nowiki></code> → <code>{{fullurl:{{FULLPAGENAME}}|action=purge}}</code>
 +
 
 +
{{LangSwitch
 +
|de=Damit lässt sich nun einfach ein Button erstellen, der den Server-Cache der aktuellen Seite löscht:
 +
|en=So it is easily possible to create a button that deletes the server cache of the current page:
 +
}}<br />
 +
<code><nowiki>{{Clickable button 2|link={{fullurl:{{FULLPAGENAME}}|action=purge}}|text=</nowiki>{{LangSwitch |de=Cache leeren |en=Clear cache}}<nowiki>|icon=refresh}}</nowiki></code><br />
 +
{{Clickable button 2|link={{fullurl:{{FULLPAGENAME}}|action=purge}}|text={{LangSwitch |de=Cache leeren |en=Clear cache}}|icon=refresh}}<!--
 +
--> ''← {{LangSwitch
 +
|de=Dieser Button leert den Cache der aktuellen Seite.
 +
|en=This button clears the cache of the current page.
 +
}}''
 +
 
 +
{{LangSwitch
 +
|de=Weitere hilfreiche URL-Parameter, die auf diese Weise mit Hilfe eines Buttons einfach zur Verfügung gestellt werden können, sind auf [[:de:Hilfe:URL-Parameter]] erklärt (siehe auch [[:mw:Manual:Parameters to index.php/de|Manual:Parameters to index.php/de]] auf Mediawiki). Es ist zu beachten, dass URL-Parameter, die Leerzeichen oder andere geschützte Zeichen wie <code>&</code> oder <code>?</code> enthalten, mit der Parserfunktion <code><nowiki>{{urlencode}}</nowiki></code> encodiert werden müssen!
 +
|en=More helpful URL parameters, which can be easily provided with the help of a button, are explained in [[:mw:Manual:Parameters to index.php/de|Manual:Parameters to index.php]] on Mediawiki. Note that URL parameters containing spaces or other protected characters like <code>&</code> or <code>?</code> must be encoded with the parser function <code><nowiki>{{urlencode}}</nowiki></code>!
 +
}}
 +
 
 +
=== {{anchor|Icons und Grafiken}}<!--
 +
-->{{anchor|Icons and graphics}}<!--
 +
-->{{LangSwitch
 +
|de=Icons und Grafiken
 +
|en=Icons and graphics
 +
}} ===
 +
 
 +
<ul>
 +
<li>
 +
'''Icons'''<br />
 +
<code><nowiki>{{Clickable button 2 | &hellip; |icon=mail-closed}}</nowiki></code><!--
 +
--> → {{Clickable button 2|icon=mail-closed}}<br />
 +
<code><nowiki>{{Clickable button 2 | &hellip; |text=|icon=mail-closed}}</nowiki></code><!--
 +
--> → {{Clickable button 2|text=|icon=mail-closed}}<br />
 +
''{{LangSwitch
 +
|de=Zu möglichen Werten für <code>icon</code> siehe die [[#icons|Übersicht]] unten.
 +
|en=For possible values of <code>icon</code> see [[#icons|overview]] below.
 +
}}''
 +
</li>
 +
 
 +
<li>
 +
'''{{LangSwitch |de=Bilder |en=Images}}'''<br />
 +
<code><nowiki>{{Clickable button 2 | &hellip; |image=[[File:checkmark.svg|18px]]}}</nowiki></code><!--
 +
--> → {{Clickable button 2|image=[[File:checkmark.svg|18px]]}}<br />
 +
<code><nowiki>{{Clickable button 2 | &hellip; |text=|image=[[File:checkmark.svg|30px]]}}</nowiki></code><!--
 +
--> → {{Clickable button 2|text=|image=[[File:checkmark.svg|30px]]}}
 +
</li>
 +
</ul>
 +
 
 +
=== {{anchor|Farben und Innenabstand}}<!--
 +
-->{{anchor|Colors and padding}}<!--
 +
-->{{LangSwitch
 +
|de=Farben und Innenabstand
 +
|en=Colors and Padding
 +
}} ===
 +
 
 +
<ul>
 +
<li>{{anchor|colors}}
 +
'''{{LangSwitch
 +
|de=Farbschemata
 +
|en=Color schemes}}:'''<br />
 +
 
 +
<code><nowiki>{{Clickable button 2 | &hellip; |color=</nowiki>{{LangSwitch |de=(Farbname) |en=(color name)}} <nowiki>}}</nowiki></code><br />
 +
{{Clickable button 2|text='''red'''    |color=red  |padding=20px 33px}}
 +
{{Clickable button 2|text='''green'''  |color=green |padding=20px 33px}}
 +
{{Clickable button 2|text='''blue'''  |color=blue  |padding=20px 33px}}<br />
 +
{{Clickable button 2|text='''red2'''  |color=red2  |padding=20px 30px}}
 +
{{Clickable button 2|text='''green2''' |color=green2|padding=20px 30px}}
 +
{{Clickable button 2|text='''blue2 ''' |color=blue2 |padding=20px 30px}}<br />
 +
{{Clickable button 2|text='''red3'''  |color=red3  |padding=20px 30px}}
 +
{{Clickable button 2|text='''green3''' |color=green3|padding=20px 30px}}
 +
{{Clickable button 2|text='''blue3'''  |color=blue3 |padding=20px 30px}}
 +
</li>
 +
 
 +
<li>
 +
'''Padding:'''<br />
 +
<div style="display:flex; flex-wrap: wrap;">
 +
<div style="display: inline-block; width: 25em;">
 +
<code><nowiki>{{Clickable button 2 | &hellip; |padding=0px}}</nowiki></code><br />
 +
<code><nowiki>{{Clickable button 2 | &hellip; |padding=10px}}</nowiki></code><br />
 +
<code><nowiki>{{Clickable button 2 | &hellip; |padding=20px}}</nowiki></code><br />
 +
{{Clickable button 2|link=Wikipedia|padding=0px}}
 +
{{Clickable button 2|link=Wikipedia|padding=10px}}
 +
{{Clickable button 2|link=Wikipedia|padding=20px}}
 +
</div>
 +
<div style="display: inline-block; width: 27em;">
 +
<code><nowiki>{{Clickable button 2 | &hellip; |padding=20px 0px}}</nowiki></code><br />
 +
<code><nowiki>{{Clickable button 2 | &hellip; |padding=0px 20px}}</nowiki></code><br />
 +
{{Clickable button 2|link=Wikipedia|padding=20px 0px}}
 +
{{Clickable button 2|link=Wikipedia|padding=0px 20px}}
 +
</div>
 +
<div style="display: inline-block; width: 28.5em;">
 +
<code><nowiki>{{Clickable button 2 | &hellip; |padding=20px 0 0 0}}</nowiki></code><br />
 +
<code><nowiki>{{Clickable button 2 | &hellip; |padding=0 0 20px 0}}</nowiki></code><br />
 +
<code><nowiki>{{Clickable button 2 | &hellip; |padding=0 20px 0 0}}</nowiki></code><br />
 +
<code><nowiki>{{Clickable button 2 | &hellip; |padding=0 0 0 20px}}</nowiki></code><br />
 +
{{Clickable button 2|link=Wikipedia|padding=20px 0 0 0}}
 +
{{Clickable button 2|link=Wikipedia|padding=0 0 20px 0}}
 +
{{Clickable button 2|link=Wikipedia|padding=0 20px 0 0}}
 +
{{Clickable button 2|link=Wikipedia|padding=0 0 0 20px}}
 +
</div>
 +
</div>
 +
</li>
 +
</ul>
 +
 
 +
== {{anchor|icons}}{{anchor|Iconübersicht}}<!--
 +
-->{{anchor|Icons overview}}<!--
 +
-->{{LangSwitch
 +
|de=Iconübersicht
 +
|en=Icons overview
 +
}} ==
 +
'''{{LangSwitch
 +
|de=Mögliche Werte für
 +
|en=Possible values for
 +
}} <code>icon</code>:'''
 +
{{Clickable button 2/Icons}}
 +
 
 +
<includeonly>
 +
<!-- Interwikis go on Wikidata, please add only Categories here -->
 +
[[Category:Formatting templates]]
 +
</includeonly>

Latest revision as of 18:28, 10 November 2019

Template:TemplateBox

  • Wikilinks, Interwikilinks Template:Int external links:
    {{Clickable button 2|link=Wikipedia|text= }}

    {{Clickable button 2|link=:en:Wikipedia|text= }}

    {{Clickable button 2|link=https://example.com|text= <kbd>https://example.com</kbd>}}
    https://example.com
  • '
     {{Clickable button 2|Wikipedia|Wikipedia-Galerie}} Template:I18n/or
    {{Clickable button 2|1=Wikipedia|2=Wikipedia-Galerie}} Template:I18n/or
    {{Clickable button 2|link=Wikipedia|text=Wikipedia-Galerie}}
    Wikipedia-Galerie
  • Tooltips:
    {{Clickable button 2|link=:en:Wikipedia|text=''Wikipedia''|title=&nbsp;:-) }}
    Wikipedia ← 

[[:mw:Special:MyLanguage/Help:Magic words#Parser functions|]] {{fullurl}}.




{{Clickable button 2|link={{fullurl:{{FULLPAGENAME}}|action=purge}}|text=|icon=refresh}}
  ←


  • Icons
    {{Clickable button 2 | … |icon=mail-closed}} →  Button
    {{Clickable button 2 | … |text=|icon=mail-closed}} →  
    '
  • '
     {{Clickable button 2 | … |image=[[File:checkmark.svg|18px]]}} → 18pxButton
    {{Clickable button 2 | … |text=|image=[[File:checkmark.svg|30px]]}} → 30px

  • :
    {{Clickable button 2 | … |color= }}
    red green blue
    red2 green2 blue2
    red3 green3 blue3
  • Padding:

    {{Clickable button 2 | … |padding=0px}}
    {{Clickable button 2 | … |padding=10px}}
    {{Clickable button 2 | … |padding=20px}}
    Button Button Button

    {{Clickable button 2 | … |padding=20px 0px}}
    {{Clickable button 2 | … |padding=0px 20px}}
    Button Button

    {{Clickable button 2 | … |padding=20px 0 0 0}}
    {{Clickable button 2 | … |padding=0 0 20px 0}}
    {{Clickable button 2 | … |padding=0 20px 0 0}}
    {{Clickable button 2 | … |padding=0 0 0 20px}}
    Button Button Button Button

icon:

  •   carat-1-n
  •   carat-1-ne
  •   carat-1-e
  •   carat-1-se
  •   carat-1-s
  •   carat-1-sw
  •   carat-1-w
  •   carat-1-nw
  •   carat-2-n-s
  •   carat-2-e-w
  •   triangle-1-n
  •   triangle-1-ne
  •   triangle-1-e
  •   triangle-1-se
  •   triangle-1-s
  •   triangle-1-sw
  •   triangle-1-w
  •   triangle-1-nw
  •   triangle-2-n-s
  •   triangle-2-e-w
  •   arrow-1-n
  •   arrow-1-ne
  •   arrow-1-e
  •   arrow-1-se
  •   arrow-1-s
  •   arrow-1-sw
  •   arrow-1-w
  •   arrow-1-nw
  •   arrow-2-n-s
  •   arrow-2-ne-sw
  •   arrow-2-e-w
  •   arrow-2-se-nw
  •   arrowstop-1-n
  •   arrowstop-1-e
  •   arrowstop-1-s
  •   arrowstop-1-w
  •   arrowthick-1-n
  •   arrowthick-1-ne
  •   arrowthick-1-e
  •   arrowthick-1-se
  •   arrowthick-1-s
  •   arrowthick-1-sw
  •   arrowthick-1-w
  •   arrowthick-1-nw
  •   arrowthick-2-n-s
  •   arrowthick-2-ne-sw
  •   arrowthick-2-e-w
  •   arrowthick-2-se-nw
  •   arrowthickstop-1-n
  •   arrowthickstop-1-e
  •   arrowthickstop-1-s
  •   arrowthickstop-1-w
  •   arrowreturnthick-1-w
  •   arrowreturnthick-1-n
  •   arrowreturnthick-1-e
  •   arrowreturnthick-1-s
  •   arrowreturn-1-w
  •   arrowreturn-1-n
  •   arrowreturn-1-e
  •   arrowreturn-1-s
  •   arrowrefresh-1-w
  •   arrowrefresh-1-n
  •   arrowrefresh-1-e
  •   arrowrefresh-1-s
  •   arrow-4
  •   arrow-4-diag
  •   extlink
  •   newwin
  •   refresh
  •   shuffle
  •   transfer-e-w
  •   transferthick-e-w
  •   folder-collapsed
  •   folder-open
  •   document
  •   document-b
  •   note
  •   mail-closed
  •   mail-open
  •   suitcase
  •   comment
  •   person
  •   print
  •   trash
  •   locked
  •   unlocked
  •   bookmark
  •   tag
  •   home
  •   flag
  •   calculator
  •   cart
  •   pencil
  •   clock
  •   disk
  •   calendar
  •   zoomin
  •   zoomout
  •   search
  •   wrench
  •   gear
  •   heart
  •   star
  •   link
  •   cancel
  •   plus
  •   plusthick
  •   minus
  •   minusthick
  •   close
  •   closethick
  •   key
  •   lightbulb
  •   scissors
  •   clipboard
  •   copy
  •   contact
  •   image
  •   video
  •   script
  •   alert
  •   info
  •   notice
  •   help
  •   check
  •   bullet
  •   radio-off
  •   radio-on
  •   pin-w
  •   pin-s
  •   play
  •   pause
  •   seek-next
  •   seek-prev
  •   seek-end
  •   seek-first
  •   stop
  •   eject
  •   volume-off
  •   volume-on
  •   power
  •   signal-diag
  •   signal
  •   battery-0
  •   battery-1
  •   battery-2
  •   battery-3
  •   circle-plus
  •   circle-minus
  •   circle-close
  •   circle-triangle-e
  •   circle-triangle-s
  •   circle-triangle-w
  •   circle-triangle-n
  •   circle-arrow-e
  •   circle-arrow-s
  •   circle-arrow-w
  •   circle-arrow-n
  •   circle-zoomin
  •   circle-zoomout
  •   circle-check
  •   circlesmall-plus
  •   circlesmall-minus
  •   circlesmall-close
  •   squaresmall-plus
  •   squaresmall-minus
  •   squaresmall-close
  •   grip-dotted-vertical
  •   grip-dotted-horizontal
  •   grip-solid-vertical
  •   grip-solid-horizontal
  •   gripsmall-diagonal-se
  •   grip-diagonal-se


Retrieved from "http://iti-testbed.tugraz.at/wiki/index.php?title=Template:Clickable_button_2/doc&oldid=446"