Vorlage:Button: Unterschied zwischen den Versionen

Aus FLUT WIKI
Zur Navigation springen Zur Suche springen
Zeile 11: Zeile 11:
   |<span class="iconify" data-icon="{{{ICON}}}" data-width="50" data-height="50"></span><br>
   |<span class="iconify" data-icon="{{{ICON}}}" data-width="50" data-height="50"></span><br>
}}{{{TEXT}}}</span></div>]</div></onlyinclude>
}}{{{TEXT}}}</span></div>]</div></onlyinclude>
==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:
<pre><div class="button-row"> ... BUTTONS ... </div></pre>
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:
<pre><div style="max-width:960px;"></pre>
Danach erfolgen die Inhalte der Seite. Am Ende der Seite ist der Tag mit  <pre></div></pre> geschlossen werden.
<pre><div style="max-width:960px;"> ... INHALTE DER SEITE ... </div></pre>
==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: <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.)
==Kopiervorlage==
<pre>
{{Vorlage:Button
|LINK=
|TEXT=
|ICON=
|CLASS=
}}
</pre>
==Beispiele==
===Einzelner Button===
<pre>
<div class="button-row">
  {{Vorlage:Button
  |LINK=Ich will helfen
  |TEXT=Ich will helfen!
  |CLASS=blue
  |ICON=fa-solid:hands-helping
  }}
</div>
</pre>
Wird zu:
<div class="button-row">
  {{Vorlage:Button
  |LINK=Ich will helfen
  |TEXT=Ich will helfen!
  |CLASS=blue
  |ICON=fa-solid:hands-helping
  }}
</div>
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.
===Mehrere Buttons===
<pre>
<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 <nowiki>[[WIKI]]</nowiki>
  |CLASS=blue
  |ICON=fluent:people-team-add-20-regular
  }}
</div>
</pre>
Wird zu:
<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 <nowiki>[[WIKI]]</nowiki>
  |CLASS=blue
  |ICON=fluent:people-team-add-20-regular
  }}
</div>
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 wie drei Buttons''' dargestellt werden.
===Begrenzung der Seitenbreite===
<pre>
<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 <nowiki>[[WIKI]]</nowiki>
  |CLASS=blue
  |ICON=fluent:people-team-add-20-regular
  }}
</div>
</div>
</pre>
Wird zu:
<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 <nowiki>[[WIKI]]</nowiki>
  |CLASS=blue
  |ICON=fluent:people-team-add-20-regular
  }}
</div>
</div>
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;).

Version vom 10. September 2021, 09:17 Uhr

Darstellung[Quelltext bearbeiten]

Beschreibung[Quelltext bearbeiten]

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 erfolgen die Inhalte der Seite. Am Ende der Seite ist der Tag mit

</div>

geschlossen werden.

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

Parameter[Quelltext bearbeiten]

  • 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[Quelltext bearbeiten]

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

Beispiele[Quelltext bearbeiten]

Einzelner Button[Quelltext bearbeiten]

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

Wird zu:

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[Quelltext bearbeiten]

<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:

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 wie drei Buttons dargestellt werden.

Begrenzung der Seitenbreite[Quelltext bearbeiten]

<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:

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

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

begrenzt (hier: 960px;).