‍

Components

Integrations

Combine

Combine ordnet bekannte Kombinationen von Components korrekt zueinander an.
Max MustermannOrganisationsinhaber
<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

Kbd + Text

Beschriftet ein Tastenkürzel, etwa in einer Legende. Gehören mehrere Kbd‍ zu einem Text‍, stehen sie alle in derselben Combine.

↑↓Auswählen

Kbd + Kbd

Mehrere Kbd stehen enger beieinander als Kbd und Text.

↑↓

Properties

PropertyTypeDescription
children
ReactNode
className
string
The elements class name.
wrapWith
ReactElement<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. `null` takes a wrapper a surrounding props context set back off, the way `tunnel: null` does for a tunnel.

Auf dieser Seite