Stack
Stapelstücke eines unter dem anderen, mit demselben Maßraum zwischen allen von ihnen.
Auf dieser Seite
Playground
123
Abstand (gap)
Ausrichtung
Hintergrund
<div class="feitio-stack" data-gap="1"><span class="lay-box">1</span><span class="lay-box">2</span><span class="lay-box">3</span></div>Wann verwenden
- Jedesmal wenn es Platz zwischen Teilen: Platz gehört zum Elternteil, und nur ein Schritt der Skala.
Wann nicht verwenden
- Für einen Komponente inneren Padding: es kommt bereit.
- Mit einer handgeschriebenen Rand entlang: nie; der Check versagt es.
Beispiele
Piece 1Piece 2Piece 3
Stapel
Drei Stücke bei space-3.
Code anzeigen
<div class="feitio-stack" data-gap="3">
…
</div><Stack gap={3}>
…
</Stack>12
34
Ein Abstand pro Ebene
Je näher, desto zusammengehöriger: zwischen den Teilen ein großer Abstand (6); in jedem Teil ein kleiner (2). Ein Stack im anderen, jeder mit seinem.
Code anzeigen
<div class="feitio-stack" data-gap="6">
<div class="feitio-stack" data-gap="2">…</div>
<div class="feitio-stack" data-gap="2">…</div>
</div>Attribute
| Attribut | Werte | Zum Zweck |
|---|---|---|
class="feitio-stack" | erforderlich | Das Layout. |
data-gap | 1 bis 7 | Der Abstand zwischen den Elementen. In React kompiliert kein anderer Wert. |
align | "start", "center" | Wie sich die Stücke horizontal ausrichten. |
Die Regeln und ein ganzes Formular, das mit allen drei erstellt wurde, finden sich in Layout.