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.
HTML-Elemente und Formatierungen
Die Text-Component unterstützt alle gängigen Formatierungen und Elemente wie
<strong>, <i>, <ul>, <ol> usw.
- Item 1
- Item 2
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.
Das ist ein Absatz
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
Light
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.
No ligatures
Verwende die noLigatures-Property, um typografische Ligaturen in der
Text-Component zu deaktivieren. Dadurch werden Zeichen unverändert und einzeln
dargestellt.
Kombiniere mit ...
Align
Benutze die Align-Component, um neben dem Text z. B. ein Icon, einen CopyButton oder ein ContextualHelp zu platzieren.