Changes
Jump to navigation
Jump to search
m
Template:Clickable button 2/doc (view source)
Revision as of 07:31, 6 November 2017
, 07:31, 6 November 2017some more spaces
{{TemplateBox
|name = Clickable button 2
|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.
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.
|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.
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.
|1 = link
|1aliases = 1
|1d-de = Gibt das Linkziel an. Erlaubt ist
* entweder ein Wikilink (ohne die doppelten Klammern <code><nowiki>[[…]]</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>[…]</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>[[…]]</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>[…]</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>[[…]]</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>[…]</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>[[…]]</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>[…]</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
|2 = text
|2aliases = 2
|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.
|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.
|2def = Button
|2type = string
|2stat = optional
|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;"> </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;"> </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;"> </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;"> </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|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>&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}} :-) }}<!--
--> ''← {{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 | … |icon=mail-closed}}</nowiki></code><!--
--> → {{Clickable button 2|icon=mail-closed}}<br />
<code><nowiki>{{Clickable button 2 | … |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 | … |image=[[File:checkmark.svg|18px]]}}</nowiki></code><!--
--> → {{Clickable button 2|image=[[File:checkmark.svg|18px]]}}<br />
<code><nowiki>{{Clickable button 2 | … |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 | … |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 | … |padding=0px}}</nowiki></code><br />
<code><nowiki>{{Clickable button 2 | … |padding=10px}}</nowiki></code><br />
<code><nowiki>{{Clickable button 2 | … |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 | … |padding=20px 0px}}</nowiki></code><br />
<code><nowiki>{{Clickable button 2 | … |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 | … |padding=20px 0 0 0}}</nowiki></code><br />
<code><nowiki>{{Clickable button 2 | … |padding=0 0 20px 0}}</nowiki></code><br />
<code><nowiki>{{Clickable button 2 | … |padding=0 20px 0 0}}</nowiki></code><br />
<code><nowiki>{{Clickable button 2 | … |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>
|name = Clickable button 2
|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.
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.
|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.
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.
|1 = link
|1aliases = 1
|1d-de = Gibt das Linkziel an. Erlaubt ist
* entweder ein Wikilink (ohne die doppelten Klammern <code><nowiki>[[…]]</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>[…]</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>[[…]]</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>[…]</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>[[…]]</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>[…]</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>[[…]]</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>[…]</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
|2 = text
|2aliases = 2
|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.
|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.
|2def = Button
|2type = string
|2stat = optional
|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;"> </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;"> </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;"> </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;"> </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|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>&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}} :-) }}<!--
--> ''← {{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 | … |icon=mail-closed}}</nowiki></code><!--
--> → {{Clickable button 2|icon=mail-closed}}<br />
<code><nowiki>{{Clickable button 2 | … |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 | … |image=[[File:checkmark.svg|18px]]}}</nowiki></code><!--
--> → {{Clickable button 2|image=[[File:checkmark.svg|18px]]}}<br />
<code><nowiki>{{Clickable button 2 | … |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 | … |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 | … |padding=0px}}</nowiki></code><br />
<code><nowiki>{{Clickable button 2 | … |padding=10px}}</nowiki></code><br />
<code><nowiki>{{Clickable button 2 | … |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 | … |padding=20px 0px}}</nowiki></code><br />
<code><nowiki>{{Clickable button 2 | … |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 | … |padding=20px 0 0 0}}</nowiki></code><br />
<code><nowiki>{{Clickable button 2 | … |padding=0 0 20px 0}}</nowiki></code><br />
<code><nowiki>{{Clickable button 2 | … |padding=0 20px 0 0}}</nowiki></code><br />
<code><nowiki>{{Clickable button 2 | … |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>