Layout

Stack, Inline und Grid: Der Abstand zwischen den Elementen stammt vom Elternkontext und kann nur ein Schritt der Skala sein.

Auf dieser Seite

Warum

Manuell festgelegte Abstände an jeder Stelle führen außerordentlich aus der Skale heraus: ein zusätzlicher Rand hier, ein nuller dort. In Feitio gehört der Abstand zwischen den Elementen immer dem Elternkontext an und kann nur ein Schritt der Skala sein. Drei Komponenten kümmern sich darum, und niemand schreibt wieder Margin, Gap oder Padding.

Drei

Piece 1Piece 2Piece 3

Stapel

Stacks die Elemente übereinander mit dem gleichen Abstand zwischen allen von ihnen.

Code anzeigen

HTML

<div class="feitio-stack" data-gap="3">
  …
</div>

React

<Stack gap={3}>
  …
</Stack>

Stück 1Stück 2Stück 3Stück 4

Inline

Legt Elemente nebeneinander zusammen und umwickelt die Zeile, wenn sie nicht passen.

Code anzeigen

HTML

<div class="feitio-inline" data-gap="2">
  …
</div>

React

<Inline gap={2}>
  …
</Inline>

Piece 1Piece 2Piece 3Piece 4Piece 5Piece 6

Raster

Spalten, die der Breite entsprechen: jede hat eine Mindestbreite und, darunter, wickelt zur nächsten Reihe. Es geht nie über den Bildschirm hinaus.

Code anzeigen

HTML

<div class="feitio-grid" data-gap="3" style="--feitio-grid-min: 9rem">
  …
</div>

React

<Grid gap={3} min="9rem">
  …
</Grid>

Zusammen

Ein ganzes Formular ohne einzigen Rand: der äußere Stack trennt Felder mit space-5, der innere verbindet Label, Hinweis und Feld mit space-1, und Inline richtet die Buttons aus.

React

<Stack gap={5}>
  <Stack gap={1}>
    <Label htmlFor="nome">Nome do lembrete</Label>
    <Hint id="nome-dica">Aparece na notificação</Hint>
    <TextInput id="nome" aria-describedby="nome-dica" />
  </Stack>
  <Inline gap={2}>
    <Button variant="primary" type="submit">Salvar lembrete</Button>
    <Button>Cancelar</Button>
  </Inline>
</Stack>

Attribute

Attribut	Werte	Zum Zweck
`gap`	`1` bis `7` (Standard: 4)	Der Abstand zwischen den Elementen, ein Schritt der Skala. Kein anderer Wert wird akzeptiert.
`align`	`"start"`, `"center"`	In Stack: Wie die Elemente horizontal ausgerichtet werden.
`justify`	`"between"`, `"end"`	In Inline: wie sich Teile entlang der Linie verteilen.
`min`	eine Breite, wie `"15rem"`	In Grid: die Mindestbreite jeder Spalte. Darunter wird die Spalte umgewickelt.

In React hat gap den Typ 1 | 2 | 3 | 4 | 5 | 6 | 7: ein Wert außerhalb der Skala kompiliert nicht einmal.

Regeln

Raum gehört zum Elternelement. Ein Komponente hat keinen äußeren Margin; Stack, Inline oder Grid entscheiden darüber den Abstand zu seinem Nachbarn.
Kein leerer Spacer zwischen zwei Elementen. Raum lebt in der Lücke des Elternelements.
Innere Padding gehört zur Komponente: die Padding eines Buttons oder Blocks ist fertiggestellt und wird nicht von Hand geändert.
Eine automatische Prüfung scheitert an Margin, Gap oder Padding, die von Hand im Code geschrieben wurden, der von jemandem verwendet Feitio.

Alle drei funktionieren auf dieser Seite in reinem CSS und gibt es auch als Astro- und React-Komponenten (@feitio/astro, @feitio/react).