Text

Playground

Um Text zu formatieren und zu gruppieren, schließe ihn mit dem <Text>-Tag ein.

import { Text } from "@mittwald/flow-react-components";

<Text>Das ist ein Text</Text>

Size

Neben der Default-Schriftgröße unterstützt Text auch die Size Small. Nutze das <small>-Tag, um sie zu verwenden.

import { Text } from "@mittwald/flow-react-components";

<Text>
  <small>Das ist ein Text in small</small>
</Text>

HTML-Elemente und Formatierungen

Die Text-Component unterstützt alle gängigen Formatierungen und Elemente wie <strong>, <i>, <ul>, <ol> usw.

import { Text } from "@mittwald/flow-react-components";

<Column>
  <Text>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
  </Text>
  <Text>
    Dies ist ein <strong>Beispiel</strong> für{" "}
    <i>verschiedene</i> HTML-Formatierungen.
  </Text>
</Column>

Mit elementType

Verwende die elementType-Property, um festzulegen, welches HTML-Element die Text-Component rendern soll. Standardmäßig wird ein <span> erzeugt. Für Fließtexte, die als eigenständige Absätze erkennbar sein sollen, verwende stattdessen ein <p>-Element.

import { Text } from "@mittwald/flow-react-components";

<Text elementType="p">Das ist ein Absatz</Text>

Color

Zusätzlich zur Standard-Color kann Text auch in den Colors Light und Dark dargestellt werden. Beide Colors sind Alternativen zur Standard-Color, falls diese nicht auf farbigen oder dekorativen Hintergründen funktioniert.

Dark

import { Text } from "@mittwald/flow-react-components";

<Text color="dark">Das ist ein Text</Text>

Light

import { Text } from "@mittwald/flow-react-components";

<Text color="light">Das ist ein Text</Text>

Light: Verwende die Light-Color bei dunklen Hintergründen mit einem HSL Lightness-Wert von weniger als 50.

Dark: Verwende die Dark-Color bei hellen, farbigen Hintergründen mit einem HSL Lightness-Wert von größer als 50.

Kombiniere mit ...

Align

Benutze die Align-Component, um neben dem Text z. B. ein Icon, einen CopyButton oder ein ContextualHelp zu platzieren.

import {
  Align,
  Button,
  ContextualHelp,
  ContextualHelpTrigger,
  CopyButton,
  IconDomain,
  Text,
} from "@mittwald/flow-react-components";

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

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

  <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>
</Column>