Zum Inhalt springen
Handbuch wien.gv.at
Startseite wien.gv.at

Stack

Der Stack wird verwendet, um mehrere Elemente nebeneinander oder untereinander darzustellen. Er zeigt responsives Verhalten, das heißt, er passt sich an die verfügbare Breite an.

 Varianten

Stack

 Vorschau 1. Element ist breiter 2. Element Code 
<wm-stack>
  <wm-highlight>1. Element ist breiter</wm-highlight>
  <wm-highlight>2. Element</wm-highlight>
</wm-stack>

Stack mit viel Abstand

 Vorschau 1. Element ist breiter 2. Element Code 
<wm-stack gap="l">
  <wm-highlight>1. Element ist breiter</wm-highlight>
  <wm-highlight>2. Element</wm-highlight>
</wm-stack>

Stack volle Breite

 Vorschau 1. Element ist breiter 2. Element Code 
<wm-stack grow='true'>
  <wm-highlight>1. Element ist breiter</wm-highlight>
  <wm-highlight>2. Element</wm-highlight>
</wm-stack>

Stack vertikal

 Vorschau 1. Element ist breiter 2. Element Code 
<wm-stack vertical="vertical">
  <wm-highlight>1. Element ist breiter</wm-highlight>
  <wm-highlight>2. Element</wm-highlight>
</wm-stack>

Stack im Formular

 Vorschau

Adresse

 Code 
<h2>Adresse</h2>
<wm-stack vertical gap="s" class="wm-h-row">
  <wm-stack gap="s" grow="">
    <wm-input type="text" label="PLZ" name="address7" id="address7" required></wm-input>
    <wm-input type="text" label="Ort" name="address8" id="address8"></wm-input>
  </wm-stack>
  <wm-input type="text" label="Straße" name="address1" id="address1" required></wm-input>
  <wm-input type="text" label="Hausnummer (einschließlich Block, Gruppe, Parzelle, Stiege)" name="address2" id="address2" required></wm-input>
  <wm-stack gap="s" equal="" grow="">
    <div>
      <label for="address5">Stock</label>
      <input type="text" name="address5" id="address5" />
    </div>
    <div>
      <label for="address6">Tür</label>
      <input type="text" name="address6" id="address6"/>
    </div>
  </wm-stack>
</wm-stack>
Dev

Interaktive Demo

Greift nicht, wenn das Elternelement aufgefüllt wird (`grow`)
Vorschau Spalte 1
mit 2. Zeile Das ist die 2. Spalte mit mehr Content. Spalte 3 Code 
<wm-stack data-demo-pattern="wm-stack-preview">
  <wm-highlight data-demo="true" data-demo-col>
    Spalte 1<br>mit 2. Zeile
  </wm-highlight>
  <wm-highlight data-demo="true" data-demo-col>
    Das ist die 2. Spalte mit mehr Content.
  </wm-highlight>
  <wm-highlight data-demo="true" data-demo-col>
    Spalte 3
  </wm-highlight>
</wm-stack>
API

Abhängigkeiten

HTML 
<script src="https://assets.wien.gv.at/theme/latest/js/components/Stack/Stack.js" type="module"></script>
 JavaScript 
import { Stack } from './wienermelange/assets/js/components/Stack/Stack.js';

Eigenschaften

Eigenschaften
Eigenschaft Beschreibung Werte Default
gap Abstand zwischen Elementen 'xxs'|'xs'|'s'|'m'|'l' "s"
gapx Horizontaler Abstand zwischen Elementen 'xxs'|'xs'|'s'|'m'|'l' leer
gapy Vertikaler Abstand zwischen Elementen 'xxs'|'xs'|'s'|'m'|'l' leer
grow Elternelement füllen. Entspricht der `flex-grow` Eigenschaft. Boolean leer
equal Wird mit `grow` verwendet und teilt den Platz nicht gleichmäßig auf, sondern macht alle Elemente gleich breit. Boolean leer
wrap Erlauben, dass Elemente wrappen können. Boolean leer
vertical Vertikal darstellen Boolean false
horizontal Immer horizontal darstellen Boolean false
justify Ausrichtung auf der Hauptachse 'center'|'end'|'space-between' leer
alignment Ausrichtung auf der Gegenachse 'center'|'end'|'start'|'stretch' leer

Slots

Name Beschreibung
default HTML oder Text-Content

CSS API

Property Beschreibung
--stack-spacing Abstand zwischen den Elementen

Kontakt

Haben Sie noch Fragen, Feedback oder brauchen Sie ein Element, das die Pattern Library noch nicht bietet?

handbuch@ma53.wien.gv.at