1.581
Bearbeitungen
Vorlage:Button: Unterschied zwischen den Versionen
Vorlage:Button (Quelltext anzeigen)
Version vom 10. September 2021, 10:17 Uhr
, 10:17, 10. Sep. 2021keine Bearbeitungszusammenfassung
Cws (Diskussion | Beiträge) |
Cws (Diskussion | Beiträge) |
||
| 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;). | |||