mittwald Flow Logo

Components

Align

Die Align Komponente dient dazu Komponenten miteinander zu kombinierenGitHub
MM
Max MustermannOrganisationsinhaber

Avatar + Text

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

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

Input + Button

import {
  Align,
  Button,
  Label,
  TextField,
} from "@mittwald/flow-react-components";

<Align>
  <TextField>
    <Label>Weiterleitungsziel</Label>
  </TextField>
  <Button>Hinzufügen</Button>
</Align>

Text + CopyButton

mail.agenturserver.de
import {
  Align,
  CopyButton,
  Text,
} from "@mittwald/flow-react-components";

<Align>
  <Text>mail.agenturserver.de</Text>
  <CopyButton text="mail.agenturserver.de" />
</Align>

Icon + Text

mail.agenturserver.de
import {
  Align,
  IconDomain,
  Text,
} from "@mittwald/flow-react-components";

<Align>
  <IconDomain />
  <Text>mail.agenturserver.de</Text>
</Align>

Text + ContextualHelp

mail.agenturserver.de
import {
  Align,
  Button,
  ContextualHelp,
  ContextualHelpTrigger,
  Text,
} from "@mittwald/flow-react-components";

<Align>
  <Text>mail.agenturserver.de</Text>

  <ContextualHelpTrigger>
    <Button />

    <ContextualHelp>
      <Text>
        Hier wird die URL des Servers angezeigt, der für den
        E-Mail-Versand genutzt wird.
      </Text>
    </ContextualHelp>
  </ContextualHelpTrigger>
</Align>
Feedback geben