6.331
Bearbeitungen
Cws (Diskussion | Beiträge) Markierung: Zurückgesetzt |
Jorka (Diskussion | Beiträge) |
||
(19 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt) | |||
Zeile 1: | Zeile 1: | ||
<onlyinclude | == Darstellung == | ||
<onlyinclude><div class="button-flex plainlinks">[{{#if: {{#invoke:URLutil|isResourceURL|1={{{LINK|{{{1}}}}}}}} | |||
| {{{LINK|{{{1}}}}}} | |||
| {{{ | | {{#ifeq: {{padleft:|1|{{{LINK|{{{1}}}}}}}}|# | ||
| {{#ifeq: {{padleft:|1|{{{ | | {{canonicalurl:{{FULLPAGENAME}}{{{LINK|{{{1}}}}}}}} | ||
| {{canonicalurl:{{FULLPAGENAME}}{{{ | | {{canonicalurl:{{{LINK|{{{1|{{FULLPAGENAME}}}}}}}}}} | ||
| {{canonicalurl:{{{ | |||
}} | }} | ||
}}<!-- link target finished | }}<!-- 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]]. | |||
}}{{ | |||
<span style=" | 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. | |||
}}</div></ | <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;). |