Vorlage:3Spalten: Unterschied zwischen den Versionen
Aus ZUM Deutsch Lernen
| deutsch-lernen>Matthias Scharwies  (Drei-Spaltenlayout für Linklisten) | K (14 Versionen importiert: Hilfe-Seiten aus ZUM-Unterrichten) | ||
| (13 dazwischenliegende Versionen von einem anderen Benutzer werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
| <includeonly><div class="grid"> | <includeonly>{{#ifeq: true | {{{skipgrid|}}}  | ||
| <div class="width-1-3">{{{1}}}</div> | | <!-- nothing --> | ||
| <div class="width-1-3">{{{2}}}</div> | | <div class="grid">   | ||
| <div class="width-1-3">{{{3}}}</div> | }}{{#if: {{{3|}}}  | ||
| </div></includeonly><noinclude> | | <!-- nothing --> | ||
| | <div class="width-1-6"></div> | |||
| }}<div class="width-1-3">{{{1| }}}</div | |||
| ><div class="width-1-3">{{{2| }}}</div | |||
| >{{#if: {{{3|}}}  | |||
| | <div class="width-1-3">{{{3}}}</div> | |||
| | <div class="width-1-6"></div> | |||
| }}{{#ifeq: true | {{{skipgrid}}}  | |||
| | <!-- nothing --> | |||
| | </div>  | |||
| }}</includeonly><noinclude> | |||
| Die Vorlage erlaubt es 3 Spalten zu erzeugen. | |||
| == So sieht's aus:  == | |||
| Die Hintergrundfarben dienen nur der Veranschaulichung. | |||
| {{Vorlage:3Spalten | {{Vorlage:3Spalten | ||
| | | |{{Box-spezial | Titel = Spalte 1 | Inhalt = |Rahmen = 0| Hintergrund = {{Farbe | primär | 1}} }} | ||
| | | |{{Box-spezial | Titel = Spalte 2 | Inhalt = |Rahmen = 0| Hintergrund = {{Farbe | sekundär-links | 1}}}} | ||
| | | |{{Box-spezial | Titel = Spalte 3 | Inhalt = |Rahmen = 0| Hintergrund = {{Farbe | sekundär-rechts | 1}}}} | ||
| }} | }} | ||
| == Syntax == | |||
|   <nowiki>{{3Spalten| | |||
|   Spalte 1 | |||
|   | | |||
|   Spalte 2 | |||
|   | | |||
|   Spalte 3 | |||
|   }}   | |||
| </nowiki> | |||
| Für spezielle Anforderungen gibt es noch 2 weitere Features: | |||
| === Parameter: skipgrid === | |||
| ;erlaubte Werte;: true, false | |||
| Ein zusätzlicher Parameter skipgrid um zu verhindern dass das container element für die 3 Spalten erzeugt wird. Das ist hilfreich, wenn man in einem größeren CSS-Grid arbeitet und nicht immer wieder neue grids aufmachen will. | |||
|    <nowiki>{{3Spalten| |    <nowiki>{{3Spalten| | ||
|    Spalte 1 |    Spalte 1 | ||
| Zeile 20: | Zeile 45: | ||
|    | |    | | ||
|    Spalte 3 |    Spalte 3 | ||
|   |skipgrid = true | |||
|   }}   | |||
| </nowiki> | |||
| === 2 Spaltig === | |||
| Sollte die Vorlage mit Inhalten für nur 2 Spalten eingebunden sein, so werden die Spalten zentriert. Der Platz der  fehlende Spalte wird links und rechts hinzugefügt. | |||
|   <nowiki>{{3Spalten| | |||
|   Spalte 1 | |||
|   | | |||
|   Spalte 2 | |||
|    }}    |    }}    | ||
| </nowiki> | </nowiki> | ||
| Die Hintergrundfarben dienen nur der Veranschaulichung. | |||
| {{3Spalten | |||
| |{{Box-spezial | Titel = Spalte 1 | Inhalt = |Rahmen = 0| Hintergrund = {{Farbe | primär | 1}} }} | |||
| |{{Box-spezial | Titel = Spalte 2 | Inhalt = |Rahmen = 0| Hintergrund = {{Farbe | sekundär-links | 1}}}} | |||
| }}   | |||
| [[Kategorie:Vorlage:Kastendesign-Bausteine]] | [[Kategorie:Vorlage:Kastendesign-Bausteine]] | ||
| </noinclude> | </noinclude> | ||
Aktuelle Version vom 9. Februar 2020, 10:11 Uhr
Die Vorlage erlaubt es 3 Spalten zu erzeugen.
So sieht's aus:
Die Hintergrundfarben dienen nur der Veranschaulichung.
Syntax
 {{3Spalten|
  Spalte 1
  |
  Spalte 2
  |
  Spalte 3
  }}  
Für spezielle Anforderungen gibt es noch 2 weitere Features:
Parameter: skipgrid
- erlaubte Werte;
- true, false
Ein zusätzlicher Parameter skipgrid um zu verhindern dass das container element für die 3 Spalten erzeugt wird. Das ist hilfreich, wenn man in einem größeren CSS-Grid arbeitet und nicht immer wieder neue grids aufmachen will.
 {{3Spalten|
  Spalte 1
  |
  Spalte 2
  |
  Spalte 3
  |skipgrid = true
  }}  
2 Spaltig
Sollte die Vorlage mit Inhalten für nur 2 Spalten eingebunden sein, so werden die Spalten zentriert. Der Platz der fehlende Spalte wird links und rechts hinzugefügt.
 {{3Spalten|
  Spalte 1
  |
  Spalte 2
  }}  
Die Hintergrundfarben dienen nur der Veranschaulichung.

