Vorlage:Button: Unterschied zwischen den Versionen

← Zum vorherigen Versionsunterschied

Vorlage:Button (Quelltext anzeigen)

Version vom 10. September 2021, 10:58 Uhr

4.685 Bytes hinzugefügt , 10:58, 10. Sep. 2021

→‎Mehrere Buttons

Jorka

Bürokraten, Oberflächenadministratoren, Administratoren

6.331

Bearbeitungen

@@ Zeile 1: / Zeile 1: @@
-<onlyinclude><templatestyles src="Button/styles.css" />
+== Darstellung ==
-<div class="button-flex plainlinks">[{{#if: {{#invoke:URLutil|isResourceURL|1={{{Link|{{{1}}}}}}}}
+<onlyinclude><div class="button-flex plainlinks">[{{#if: {{#invoke:URLutil|isResourceURL|1={{{LINK|{{{1}}}}}}}}
-    | {{{Link|{{{1}}}}}}
+    | {{{LINK|{{{1}}}}}}
-    | {{#ifeq: {{padleft:|1|{{{Link|{{{1}}}}}}}}|#
+    | {{#ifeq: {{padleft:|1|{{{LINK|{{{1}}}}}}}}|#
-        | {{canonicalurl:{{FULLPAGENAME}}{{{Link|{{{1}}}}}}}}
+        | {{canonicalurl:{{FULLPAGENAME}}{{{LINK|{{{1}}}}}}}}
-        | {{canonicalurl:{{{Link|{{{1|{{FULLPAGENAME}}}}}}}}}}
+        | {{canonicalurl:{{{LINK|{{{1|{{FULLPAGENAME}}}}}}}}}}
       }}
     }}<!-- link target finished
---><div role="button" class="plainlinks {{{class|}}}" style="margin:{{{Margin|.5em}}}; {{#if: {{{Padding|}}} | padding-left: {{{Padding}}}; padding-right: {{{Padding}}};"}}> <span {{#if:{{{Tooltip|}}}|title="{{{Tooltip}}}"}}
+--><div role="button" class="button-style {{{CLASS|}}}"> <span {{#if:{{{Tooltip|}}}|title="{{{Tooltip}}}"}}
->{{#if:{{{Icon|}}}
+>{{#if:{{{ICON|}}}
-   |<big><span class="iconify" data-icon="{{{Icon}}}"></span></big><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 folgen die Inhalte der Seite. Am Ende der Seite muss 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 als 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;).