6.331
Bearbeitungen
Vorlage:Button: Unterschied zwischen den Versionen
Vorlage:Button (Quelltext anzeigen)
Version vom 10. September 2021, 10:58 Uhr
, 10:58, 10. Sep. 2021→Mehrere Buttons
Cws (Diskussion | Beiträge) |
Jorka (Diskussion | Beiträge) |
||
| (3 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 19: | Zeile 19: | ||
<pre><div class="button-row"> ... BUTTONS ... </div></pre> | <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]]. | 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: | 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> | <pre><div style="max-width:960px;"></pre> | ||
Danach | 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> | <pre><div style="max-width:960px;"> ... INHALTE DER SEITE ... </div></pre> | ||
| Zeile 29: | Zeile 29: | ||
==Parameter== | ==Parameter== | ||
* '''LINK''': (Pflicht) Wiki-Seite oder URL, zu der der Button verlinken soll. | * '''LINK''': (Pflicht) Wiki-Seite oder URL, zu der der Button verlinken soll. | ||
* '''TEXT''': (Pflicht) Linktext der erscheinen 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]] | * '''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.) | * '''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.) | ||
| Zeile 121: | Zeile 121: | ||
</div> | </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 | 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=== | ===Begrenzung der Seitenbreite=== | ||