Vorlage:Button

Darstellung

Beschreibung

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.

Um mehrere Buttons nebeneinander darzustellen ist die #Kopiervorlage in folgende Tags einzubinden:

<div class="button-row"> ... BUTTONS ... </div>

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.

Man kann die Darstellung der gesamten Seite zunächst komplett begrenzen. Dazu ist an erster Stelle der Seite folgender Code einzufügen:

<div style="max-width:960px;">

Danach folgen die Inhalte der Seite. Am Ende der Seite muss der Tag mit

</div>

geschlossen werden.

<div style="max-width:960px;"> ... INHALTE DER SEITE ... </div>

Parameter

LINK: (Pflicht) Wiki-Seite oder URL, zu der der Button verlinken soll.
TEXT: (Pflicht) Linktext, der erscheinen soll.
ICON: (Pflicht) Ein Icon von https://icon-sets.iconify.design/ das über dem Linktext dargestellt werden soll. Siehe auch hierzu die #Beispiele
CLASS: (Pflicht) Hintergrundfarbe für den Button. Mögliche Werte sind: blue, green, red, purple, yellow, grey (Hinweis: Die Angabe eines Farben-Hex-Wertes ist hier nicht möglich.)

Kopiervorlage

{{Vorlage:Button
|LINK=
|TEXT=
|ICON=
|CLASS=
}}

Beispiele

Einzelner Button

<div class="button-row">
  {{Vorlage:Button
  |LINK=Ich will helfen
  |TEXT=Ich will helfen!
  |CLASS=blue
  |ICON=fa-solid:hands-helping
  }}
</div>

Wird zu:

Ich will helfen!

Die

<div class="button-row"> ... </div>

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.

Mehrere Buttons

<div class="button-row">
  {{Vorlage:Button
  |LINK=A-Z
  |TEXT=A-Z
  |CLASS=green
  |ICON=simple-line-icons:layers
  }}

 {{Vorlage:Button
  |LINK=Hauptseite:Informationen & Warnungen
  |TEXT=Informationen & Warnungen
  |CLASS=purple
  |ICON=simple-line-icons:info
  }}

  {{Vorlage:Button
  |LINK=Warum_Wer_Wie
  |TEXT=Über FLUT [[WIKI]]
  |CLASS=blue
  |ICON=fluent:people-team-add-20-regular
  }}
</div>

Wird zu:

A-Z

Informationen & Warnungen

Über FLUT [[WIKI]]

Auch hier erzeugt

<div class="button-row"> ... </div>

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.

Begrenzung der Seitenbreite

<div style="max-width:960px;">
<div class="button-row">
  {{Vorlage:Button
  |LINK=A-Z
  |TEXT=A-Z
  |CLASS=green
  |ICON=simple-line-icons:layers
  }}

 {{Vorlage:Button
  |LINK=Hauptseite:Informationen & Warnungen
  |TEXT=Informationen & Warnungen
  |CLASS=purple
  |ICON=simple-line-icons:info
  }}

  {{Vorlage:Button
  |LINK=Warum_Wer_Wie
  |TEXT=Über FLUT [[WIKI]]
  |CLASS=blue
  |ICON=fluent:people-team-add-20-regular
  }}
</div>
</div>

Wird zu:

A-Z

Informationen & Warnungen

Über FLUT [[WIKI]]

Die Darstellung entspricht grundsätzlich der Darstellung von #Mehrere Buttons. Die dargestellte Breite wird jedoch mit

<div style="max-width:960px;">

begrenzt (hier: 960px;).