Vorlage:Button: Unterschied zwischen den Versionen

← Zum vorherigen Versionsunterschied

Vorlage:Button (Quelltext anzeigen)

Version vom 10. September 2021, 10:58 Uhr

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

→‎Mehrere Buttons

Jorka

Bürokraten, Oberflächenadministratoren, Administratoren

6.331

Bearbeitungen

@@ Zeile 1: / Zeile 1: @@
-<onlyinclude>
+== Darstellung ==
-<div class="button-flex">[{{#if: {{#invoke:URLutil|isResourceURL|1={{{Link|{{{1}}} }}} }} | {{{Link|{{{1}}}}}} | {{#ifeq: {{padleft:|1|{{{Link|{{{1}}}}}} }}| # | {{canonicalurl:{{FULLPAGENAME}}{{{Link|{{{1}}}}}}}} | {{canonicalurl:{{{Link|{{{1|{{FULLPAGENAME}}}}}}}}}}  }}  }}<div role="button" class="button-style green"><big><span class="iconify" data-icon="simple-line-icons:home"></span></big><br>{{{Link}}}</div>]</div>
+<onlyinclude><div class="button-flex plainlinks">[{{#if: {{#invoke:URLutil|isResourceURL|1={{{LINK|{{{1}}}}}}}}
-</onlyinclude>
+   | {{{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="{{{Tooltip}}}"}}
+>{{#if:{{{ICON|}}}
+   |<span class="iconify" data-icon="{{{ICON}}}" data-width="50" data-height="50"></span><br>
+}}{{{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.
-<templatestyles src="Button/styles.css" /><div  role="button" class="plainlinks {{#if:{{{Zentriert|}}}|{{#if:{{#invoke:TemplUtl|faculty|{{{Zentriert}}}}}|center}}}} {{{class|}}}" style="margin:{{{Margin|.5em}}};">
+<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.)
-[[{{#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-->
+==Kopiervorlage==
+<pre>
+{{Vorlage:Button
+|LINK=
+|TEXT=
+|ICON=
+|CLASS=
+}}
+</pre>
+==Beispiele==
-<span class="mw-ui-button {{#switch: {{{Typ|}}}
+===Einzelner Button===
-                                |destructive=mw-ui-destructive
+<pre>
-                                |progressive=mw-ui-progressive
+<div class="button-row">
-                                |destructive-normal=mw-ui-destructive mw-ui-quiet
+  {{Vorlage:Button
-                                |progressive-normal=mw-ui-progressive mw-ui-quiet
+  |LINK=Ich will helfen
-                              }}
+  |TEXT=Ich will helfen!
-                 {{#if:{{{Groß|}}}|{{#if:{{#invoke:TemplUtl|faculty|{{{Groß}}}}}|mw-ui-big}}}}
+  |CLASS=blue
-                 {{#if:{{{Quiet|}}}|{{#if:{{#invoke:TemplUtl|faculty|{{{Quiet}}}}}|mw-ui-quiet}}}}"
+  |ICON=fa-solid:hands-helping
-          {{#if: {{{Padding|}}} | style="padding: {{{Padding}}};"}}
+  }}
-{{#if:{{{Tooltip|}}}|title="{{{Tooltip}}}"}}
+</div>
->{{#if:{{{Icon|}}}
+</pre>
-   |<span class="nomobile noviewer" style="margin-right:.5em" aria-hidden="true" role="presentation">[[Datei:{{{Icon}}}|{{#if:
-        {{#invoke:TemplUtl|faculty|{{{Groß|}}}}}|24|16}}px|link=]]</span>
+Wird zu:
-}}{{{Text}}}</span>]{{#if: {{{Hilfe|}}} |
+<div class="button-row">
-<span style="margin-left:2px; position:relative; top:-{{#if:
+  {{Vorlage:Button
-                     {{#invoke:TemplUtl|faculty|{{{Groß|}}}}}|12|10}}px;"
+  |LINK=Ich will helfen
-     >[[Datei:OOjs UI icon help.svg|{{#if:
+  |TEXT=Ich will helfen!
-                     {{#invoke:TemplUtl|faculty|{{{Groß|}}}}}|20|16}}px|link={{{Hilfe}}}]]</span>
+  |CLASS=blue
-}}</div>
+  |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;).