Components

Integrations

Combine

Combine ordnet bekannte Kombinationen von Components korrekt zueinander an.
GitHubMarkdown
Max MustermannOrganisationsinhaber
import {
  Combine,
  Avatar,
  Initials,
  Text,
} from "@mittwald/flow-react-components";

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

Best Practices

  • Verwende nur die unterstützten Kombinationen. Andere Kombinationen erzeugen keine Anordnung.
  • Nutze Combine nicht als generisches Layout-Tool. Für eine freie Anordnung ist Flex vorgesehen, für Spalten das ColumnLayout.
  • Nutze neben der Anordnung auch visuelle Anpassungen wie das Setzen von Colors.

Combine vs. Flex

Combine ist das fertige Pattern, Flex das freie Werkzeug. Prüfe deshalb zuerst, ob die gewünschte Anordnung schon als Kombination existiert – dann bleibt sie auch bei geändertem Inhalt und über alle Breakpoints korrekt.

Verwende Combine, um ...

  • eine der unterstützten Kombinationen darzustellen.
  • die Anordnung dem Designsystem zu überlassen.

Verwende Flex, um ...

  • individuelle Layouts zu gestalten, die keinem festen UI-Pattern folgen.
  • bewusst vom Standard des Designsystems abzuweichen.

Kombinationen

Neben Avatar + Text unterstützt Combine die folgenden Kombinationen.

Input + Button

Der Button sitzt auf der Höhe des Eingabefelds – unabhängig davon, ob das Feld ein Label oder eine FieldDescription hat.

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>>-A React element the component is wrapped with. The element is cloned and receives the component as its only child — useful to render the component inside a link, a tooltip trigger or any other wrapper without changing the surrounding markup.
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