Vorlage:Button: Unterschied zwischen den Versionen
Aus ZUM Grundschullernportal
(Die Seite wurde neu angelegt: „<noinclude>Mit dieser Vorlage können Links einfach als Button angezeigt werden. Die Vorlage hat folgende Parameter: # position: links|zenriert|rechts (opt…“) Markierung: 2017-Quelltext-Bearbeitung |
Keine Bearbeitungszusammenfassung Markierung: 2017-Quelltext-Bearbeitung |
||
Zeile 140: | Zeile 140: | ||
</noinclude><includeonly> | </noinclude><includeonly> | ||
<div class="{{#switch:{{{position|}}}|links=button-left|zentriert=button-center|rechts=button-right}} {{#ifeq:{{{hervorhebung|}}}|ja|button-primary}}"> | <div class="{{#switch:{{{position|}}}|links=button-left|zentriert=button-center|rechts=button-right}} {{#ifeq:{{{hervorhebung|}}}|ja|button-primary}}">[{{{link|}}}|{{{text|}}}]</div> | ||
</includeonly> | </includeonly> |
Version vom 15. Februar 2020, 12:47 Uhr
Mit dieser Vorlage können Links einfach als Button angezeigt werden. Die Vorlage hat folgende Parameter:
- position: links|zenriert|rechts (optional, default ist links)
- text: ...
- link: ...
- hervorhebung: ja|nein (optional, default ist nein)
Das schreibt man:
{{button |position=zentriert |text=Start |link=Hauptseite |hervorhebung=ja }}
Das sieht man:
Weiteres Beispiel mit Icon:
{{button |position=rechts |text=Lernpfade Mathematik <span class="fa fa-chevron-circle-right"></span> |link=Mathematik-digital }}
Das sieht man:
Mehrere Buttons nebeneinander
Wenn mehrere Buttons nebeneinander positioniert werden sollen, kann diese Vorlage mit der Vorlage:2Spalten bzw. der Vorlage:3Spalten kombiniert werden. Die Buttons werden dann auf kleinen Displays untereinander statt nebeneinander angezeigt:
{{3Spalten | {{button |position=links |text=Button links |link=:Kategorie:Lernpfad }} | {{button |position=zentriert |text=Button Mitte |link=:Kategorie:Lernpfad }} | {{button |position=rechts |text=Button rechts |link=:Kategorie:Lernpfad }} }}
Das sieht man:
Weiteres Beispiel
{{2Spalten | {{button |position=links |text=<span class="fa fa-chevron-circle-left"></span> zurück |link=:Kategorie:Lernpfad }} | {{button |position=rechts |text=weiter <span class="fa fa-chevron-circle-right"></span> |link=:Kategorie:Lernpfad |hervorhebung=ja }} }}
Das sieht man: