Align
Align kombiniert Components gezielt, inklusive Anordnung und Farbanpassungen.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>
Best Practices
- Verwende nur die unterstützten Kombinationen.
- Nutze Align nicht als generisches Layout-Tool. Für eine freie Anordnung ist Flex vorgesehen.
- Nutze neben der Anordnung auch visuelle Anpassungen wie das Setzen von Colors.
Kombinationen
Neben Avatar + Text unterstützt Align die folgenden Kombinationen.
Input + Button
Text + CopyButton
mail.agenturserver.de
Icon + Text
mail.agenturserver.de
Text + ContextualHelp
mail.agenturserver.de
Properties
| Property | Type | Default | Description |
|---|---|---|---|
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. |
ref | Ref<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 |
key | Key | - |