https://ukraine.kat-wiki.org/index.php?action=history&feed=atom&title=Vorlage%3AButtonVorlage:Button - Versionsgeschichte2026-04-21T04:32:14ZVersionsgeschichte dieser Seite in KAT [[WIKI]] hilft UkraineMediaWiki 1.37.1https://ukraine.kat-wiki.org/index.php?title=Vorlage:Button&diff=113&oldid=prevCws: Die Seite wurde neu angelegt: „== Darstellung == <onlyinclude><div class="button-flex plainlinks">[{{#if: {{#invoke:URLutil|isResourceURL|1={{{LINK|{{{1}}}}}}}} | {{{LINK|{{{1}}}}}} | {{#ifeq: {{padleft:|1|{{{LINK|{{{1}}}}}}}}|# | {{canonicalurl:{{FULLPAGENAME}}{{{LINK|{{{1}}}}}}}} | {{canonicalurl:{{{LINK|{{{1|{{FULLPAGENAME}}}}}}}}}} }} }}<!-- link target finished --><div role="button" class="button-style {{{CLASS|}}}"> <span {{#if:{{{Tooltip|}}}|title="{{…“2022-03-22T20:12:47Z<p>Die Seite wurde neu angelegt: „== Darstellung == <onlyinclude><div class="button-flex plainlinks">[{{#if: {{#invoke:URLutil|isResourceURL|1={{{LINK|{{{1}}}}}}}} | {{{LINK|{{{1}}}}}} | {{#ifeq: {{padleft:|1|{{{LINK|{{{1}}}}}}}}|# | {{canonicalurl:{{FULLPAGENAME}}{{{LINK|{{{1}}}}}}}} | {{canonicalurl:{{{LINK|{{{1|{{FULLPAGENAME}}}}}}}}}} }} }}<!-- link target finished --><div role="button" class="button-style {{{CLASS|}}}"> <span {{#if:{{{Tooltip|}}}|title="{{…“</p>
<p><b>Neue Seite</b></p><div>== Darstellung ==<br />
<onlyinclude><div class="button-flex plainlinks">[{{#if: {{#invoke:URLutil|isResourceURL|1={{{LINK|{{{1}}}}}}}}<br />
| {{{LINK|{{{1}}}}}}<br />
| {{#ifeq: {{padleft:|1|{{{LINK|{{{1}}}}}}}}|#<br />
| {{canonicalurl:{{FULLPAGENAME}}{{{LINK|{{{1}}}}}}}}<br />
| {{canonicalurl:{{{LINK|{{{1|{{FULLPAGENAME}}}}}}}}}}<br />
}}<br />
}}<!-- link target finished<br />
--><div role="button" class="button-style {{{CLASS|}}}"> <span {{#if:{{{Tooltip|}}}|title="{{{Tooltip}}}"}}<br />
>{{#if:{{{ICON|}}}<br />
|<span class="iconify" data-icon="{{{ICON}}}" data-width="50" data-height="50"></span><br><br />
}}{{{TEXT}}}</span></div>]</div></onlyinclude><br />
<br />
==Beschreibung==<br />
Mit dieser Vorlage kann man einen Button auf einer Seite erzeugen. Der Button dient vor allem zur besseren Bedienung auf mobilen Endgeräten und bietet ein App-ähnliches Aussehen der Webseite.<br />
<br />
Um mehrere Buttons nebeneinander darzustellen ist die [[#Kopiervorlage]] in folgende Tags einzubinden:<br />
<br />
<pre><div class="button-row"> ... BUTTONS ... </div></pre><br />
<br />
Das dient dazu, dass die Buttons nebeneinander dargestellt werden und sich die Anordnung dynamisch verändert, wenn man mit kleineren Bildschirmen versucht, die Seite aufzurufen. Sie hierzu die [[#Beispiele]].<br />
<br />
Man kann die Darstellung der gesamten Seite zunächst komplett begrenzen. Dazu ist an erster Stelle der Seite folgender Code einzufügen:<br />
<pre><div style="max-width:960px;"></pre><br />
Danach folgen die Inhalte der Seite. Am Ende der Seite muss der Tag mit <pre></div></pre> geschlossen werden.<br />
<br />
<pre><div style="max-width:960px;"> ... INHALTE DER SEITE ... </div></pre><br />
<br />
==Parameter==<br />
* '''LINK''': (Pflicht) Wiki-Seite oder URL, zu der der Button verlinken soll.<br />
* '''TEXT''': (Pflicht) Linktext, der erscheinen soll.<br />
* '''ICON''': (Pflicht) Ein Icon von https://icon-sets.iconify.design/ das über dem Linktext dargestellt werden soll. Siehe auch hierzu die [[#Beispiele]]<br />
* '''CLASS''': (Pflicht) Hintergrundfarbe für den Button. Mögliche Werte sind: <span class="blue">blue</span>, <span class="green">green</span>, <span class="red">red</span>, <span class="purple">purple</span>, <span class="yellow">yellow</span>, <span class="grey">grey</span> (Hinweis: Die Angabe eines Farben-Hex-Wertes ist hier nicht möglich.)<br />
<br />
==Kopiervorlage==<br />
<pre><br />
{{Vorlage:Button<br />
|LINK=<br />
|TEXT=<br />
|ICON=<br />
|CLASS=<br />
}}<br />
</pre><br />
<br />
==Beispiele==<br />
<br />
===Einzelner Button===<br />
<pre><br />
<div class="button-row"><br />
{{Vorlage:Button<br />
|LINK=Ich will helfen<br />
|TEXT=Ich will helfen!<br />
|CLASS=blue<br />
|ICON=fa-solid:hands-helping<br />
}}<br />
</div><br />
</pre><br />
<br />
Wird zu:<br />
<br />
<div class="button-row"><br />
{{Vorlage:Button<br />
|LINK=Ich will helfen<br />
|TEXT=Ich will helfen!<br />
|CLASS=blue<br />
|ICON=fa-solid:hands-helping<br />
}}<br />
</div><br />
<br />
Die <span class="grey"><pre><div class="button-row"> ... </div></pre></span> erzeugt zunächst die Buttonzeile für eine dynamische Anzeige der Buttons. Da die Vorlage nur einmal angewandt wird, wird nur ein Button über die gesamte Breite erzeugt.<br />
<br />
===Mehrere Buttons===<br />
<pre><br />
<div class="button-row"><br />
{{Vorlage:Button<br />
|LINK=A-Z<br />
|TEXT=A-Z<br />
|CLASS=green<br />
|ICON=simple-line-icons:layers<br />
}}<br />
<br />
{{Vorlage:Button<br />
|LINK=Hauptseite:Informationen & Warnungen<br />
|TEXT=Informationen & Warnungen<br />
|CLASS=purple<br />
|ICON=simple-line-icons:info<br />
}}<br />
<br />
{{Vorlage:Button<br />
|LINK=Warum_Wer_Wie<br />
|TEXT=Über FLUT <nowiki>[[WIKI]]</nowiki><br />
|CLASS=blue<br />
|ICON=fluent:people-team-add-20-regular<br />
}}<br />
</div><br />
</pre><br />
<br />
Wird zu:<br />
<br />
<div class="button-row"><br />
{{Vorlage:Button<br />
|LINK=A-Z<br />
|TEXT=A-Z<br />
|CLASS=green<br />
|ICON=simple-line-icons:layers<br />
}}<br />
<br />
{{Vorlage:Button<br />
|LINK=Hauptseite:Informationen & Warnungen<br />
|TEXT=Informationen & Warnungen<br />
|CLASS=purple<br />
|ICON=simple-line-icons:info<br />
}}<br />
<br />
{{Vorlage:Button<br />
|LINK=Warum_Wer_Wie<br />
|TEXT=Über FLUT <nowiki>[[WIKI]]</nowiki><br />
|CLASS=blue<br />
|ICON=fluent:people-team-add-20-regular<br />
}}<br />
</div><br />
<br />
Auch hier erzeugt <span class="grey"><pre><div class="button-row"> ... </div></pre></span> wieder die Buttonzeile für eine dynamische Anzeige der Buttons. In diesem Fall werden nun 3 Buttons in unterschiedlichen Farben nebeneinander erzeugt. Theoretisch können eine unbegrenzte Anzahl von Buttons nebeneinander dargestellt werden. Für eine mobile Ansicht sollten '''nicht mehr als drei Buttons''' dargestellt werden.<br />
<br />
===Begrenzung der Seitenbreite===<br />
<br />
<pre><br />
<div style="max-width:960px;"><br />
<div class="button-row"><br />
{{Vorlage:Button<br />
|LINK=A-Z<br />
|TEXT=A-Z<br />
|CLASS=green<br />
|ICON=simple-line-icons:layers<br />
}}<br />
<br />
{{Vorlage:Button<br />
|LINK=Hauptseite:Informationen & Warnungen<br />
|TEXT=Informationen & Warnungen<br />
|CLASS=purple<br />
|ICON=simple-line-icons:info<br />
}}<br />
<br />
{{Vorlage:Button<br />
|LINK=Warum_Wer_Wie<br />
|TEXT=Über FLUT <nowiki>[[WIKI]]</nowiki><br />
|CLASS=blue<br />
|ICON=fluent:people-team-add-20-regular<br />
}}<br />
</div><br />
</div><br />
</pre><br />
<br />
Wird zu:<br />
<br />
<div style="max-width:960px;"><br />
<div class="button-row"><br />
{{Vorlage:Button<br />
|LINK=A-Z<br />
|TEXT=A-Z<br />
|CLASS=green<br />
|ICON=simple-line-icons:layers<br />
}}<br />
<br />
{{Vorlage:Button<br />
|LINK=Hauptseite:Informationen & Warnungen<br />
|TEXT=Informationen & Warnungen<br />
|CLASS=purple<br />
|ICON=simple-line-icons:info<br />
}}<br />
<br />
{{Vorlage:Button<br />
|LINK=Warum_Wer_Wie<br />
|TEXT=Über FLUT <nowiki>[[WIKI]]</nowiki><br />
|CLASS=blue<br />
|ICON=fluent:people-team-add-20-regular<br />
}}<br />
</div><br />
</div><br />
<br />
Die Darstellung entspricht grundsätzlich der Darstellung von [[#Mehrere Buttons]]. Die dargestellte Breite wird jedoch mit <pre><div style="max-width:960px;"></pre> begrenzt (hier: 960px;).</div>Cws