Align

Align dient dazu, ausgewählte Components gezielt miteinander zu kombinieren - inklusive Anordnung und visueller Anpassungen (z. B. Farbänderungen).
GitHubMarkdown

Grundlagen

Wir haben die Align Component entwickelt, um häufig wiederkehrende Kombinationen von Components konsistent darzustellen. Sie sorgt für visuelle und funktionale Einheitlichkeit in unseren Oberflächen – ohne, dass für jede dieser Kombinationen eine eigene Component entwickelt werden muss.

Best Practices

Achte bei der Verwendung von Align darauf, dass ...

  • nur die im Overview genannten Components kombiniert werden können.
  • es nicht als generisches Layout-Tool dient. Für eine freie Anordnung ist Flex vorgesehen.
  • neben einer korrekten Anordnung auch visuelle Anpassungen (z. B. das Setzen von Farben) vorgenommen werden können.

Verwendung

Verwende Align, um ...

  • vorab definierte Components (z. B. Button und TextField) sinnvoll anzuordnen.
  • wiederkehrende UI-Patterns konsistent umzusetzen.

Nutze folgende Components innerhalb von <Align />, um sie zu kombinieren.

Avatar + Text

Max MustermannOrganisationsinhaber
import {
  Align,
  Avatar,
  Initials,
  Text,
} from "@mittwald/flow-react-components";

<Align>
  <Avatar>
    <Initials>Max Mustermann</Initials>
  </Avatar>
  <Text>
    <strong>Max Mustermann</strong>
    Organisationsinhaber
  </Text>
</Align>

Input + Button

Text + CopyButton

mail.agenturserver.de

Icon + Text

mail.agenturserver.de

Text + ContextualHelp

mail.agenturserver.de

Properties

PropertyTypeDefaultDescription
childrenReactNode-
classNamestring-The elements class name.
wrapWithReactElement<unknown, string | JSXElementConstructor<any>>-
refRef<HTMLSpanElement>-Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see React Docs
keyKey-

Auf dieser Seite