CapDrive
Benutzerhandbuch

Text

Anzeige von Messwerten, Einheiten oder beschreibendem Text. Schriftart, Schriftgröße, Ausrichtung, Zeilenumbruch und Kürzung können eingestellt werden; Der Inhalt wird einheitlich in eine Zeichenfolge konvertiert und leere Werte werden als leer angezeigt.

Beispiel

function main() {
  return (
    <Text fontSize={32} font="rounded" lineLimit={2} truncationMode="tail">
      Hello, CapDrive
    </Text>
  );
}

Verwendung

  • Inhalt wird mit toString() umgewandelt; null/undefined bleiben leer. Symbole mit HStack kombinieren, nicht in Text verschachteln. width begrenzen, dann lineLimit/truncationMode setzen. minimumScaleFactor=1 verhindert Verkleinern.
  • Maße sind Punkte. auto misst Inhalt, fill nutzt den zugeteilten Elternraum. Zuerst den Container bemessen; fill und langer Text vergrößern keinen festen Elternrahmen.

Eigenschaften

children?TextContent | TextContent[]

Untergeordneter Zeicheninhalt.

fontSize?number

Schriftgröße in Punkten.

Beispiel14
fontWeight?"ultraLight" | "thin" | "light" | "regular" | "medium" | "semibold" | "bold" | "heavy" | "black"

Schriftgewicht ultraLight bis black; regular ist normal.

Beispiel"regular"
font?"default" | "rounded" | "monospaced" | "serif"

Schriftdesign: default, rounded, monospaced oder serif.

Beispiel"default"
color?Paint

Zeichenfarbe, einschließlich HDR-Farben.

BeispielHDR($env.foreground)
alignment?"leading" | "center" | "trailing"

Text innerhalb der Breite mit leading, center oder trailing ausrichten.

Beispiel"leading"
lineLimit?number | null

Maximale Zeilenzahl; null oder Weglassen erlaubt unbegrenzten Zeilenumbruch.

Beispiel1
truncationMode?"head" | "middle" | "tail"

Position ausgelassenen Texts: head, middle oder tail.

Beispiel"tail"
minimumScaleFactor?number

Kleinster Textfaktor bei Platzmangel: 0.01–1; 1 verhindert Verkleinerung.

Beispiel0.5
monospacedDigits?boolean

Gleich breite Ziffern verhindern seitliches Springen wechselnder Zahlen.

Beispieltrue
letterSpacing?number

Zusätzlicher Zeichenabstand in Punkten.

Beispiel0
contentAnimation?ContentAnimation

Übergang bei Inhaltsänderung. Unterstützten type wählen; duration/delay in Sekunden.

Beispiel{type: "numericText"}
Allgemeine Eigenschaften
width?number | "auto" | "fill"

Breite in Punkten, automatische Größe oder Ausfüllen des übergeordneten Bereichs.

Beispiel100
height?number | "auto" | "fill"

Höhe in Punkten, automatische Größe oder Ausfüllen des übergeordneten Bereichs.

Beispiel80
padding?number

Innenabstand des Inhalts in Punkten.

Beispiel0
x?number

Visueller Versatz in Punkten: x nach rechts, y nach unten; der Layoutplatz bleibt gleich.

Beispiel0
y?number

Visueller Versatz in Punkten: x nach rechts, y nach unten; der Layoutplatz bleibt gleich.

Beispiel0
transform?ViewTransform

Gesamten View ohne Layoutänderung transformieren. Verschiebung in Punkten, Drehung/Neigung in Grad, Skalierung 1 unverändert, Anker 0–1.

Beispiel{rotation: 0}
background?Paint

Hintergrundfarbe oder Verlauf; clear ist transparent.

Beispiel"clear"
opacity?number

Deckkraft des gesamten Views: 0 transparent, 1 undurchsichtig.

Beispiel1
cornerRadius?number

Eckenradius in Punkten.

Beispiel0
clipped?boolean

Zeichnung außerhalb der View-Grenzen abschneiden.

Beispielfalse
clip?"rectangle" | "ellipse"

Schnittform rectangle oder ellipse; Material erlaubt auch false zum Abschalten.

Beispiel"rectangle"
mask?View | null

View als Alphamaske. Zentriert ohne Einfluss auf das Layout; null deaktiviert die Maske.

Beispiel<Circle width="fill" height="fill" background="white"/>
zIndex?number

Zeichenreihenfolge unter Geschwistern; größere Werte liegen vorne.

Beispiel0
blur?number

Unschärferadius in Punkten; 0 deaktiviert die Unschärfe.

Beispiel4
innerShadow?DrawingEffect

Effektfarbe, Deckkraft, Unschärferadius und x/y-Versatz; Entfernungen in Punkten.

Beispiel{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}
glow?DrawingEffect

Effektfarbe, Deckkraft, Unschärferadius und x/y-Versatz; Entfernungen in Punkten.

Beispiel{color: HDR("cyan"), radius: 8, opacity: 0.8}
shadowColor?Color

Farbe des äußeren Schattens.

BeispielHDR("black")
shadowOpacity?number

Schattendeckkraft 0–1; 0 blendet ihn aus.

Beispiel0
shadowRadius?number

Unschärferadius des äußeren Schattens in Punkten.

Beispiel4
shadowX?number

Schattenversatz in Punkten: x rechts, y unten.

Beispiel0
shadowY?number

Schattenversatz in Punkten: x rechts, y unten.

Beispiel2
animations?Animation[]

Attributänderung animieren. duration/delay in Sekunden; from/to sind Endwerte; repeat/autoreverse steuern Wiederholung, wrap die Periode.

Beispiel[{property: "opacity", duration: 0.25, curve: "easeInOut"}]
key?string | number

Stabile Kennung unter Geschwisterelementen.

Praxisbeispiel

function main() {
  return (
    <VStack width={180} spacing={12}>
      <Text width="fill" fontSize={20} lineLimit={2} truncationMode="tail">
        CapDrive — a longer instrument title
      </Text>
      <HStack alignment="firstTextBaseline" spacing={4}>
        <Text fontSize={48} monospacedDigits={true}>
          78
        </Text>
        <Text fontSize={14}>km/h</Text>
      </HStack>
    </VStack>
  );
}

Animation

Animation

widthheightpaddingxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYfontSizeletterSpacingminimumScaleFactorcolortransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorY

Beim Weglassen

Die Tabelle zeigt implementierte Vorgaben beim Weglassen. Eigenschaftsbeispiele sind keine Standardwerte. Für feste Ergebnisse explizite Werte setzen; kontextabhängige Maße und Themenfarben sind keine Konstanten.

EigenschaftenBeim Weglassen
fontSize14
fontWeight"regular"
font"default"
monospacedDigitstrue
minimumScaleFactor1
lineLimitnull
alignment"center"
truncationMode"tail"
colorHDR($env.foreground)

HStack

Symbol

Color / Gradient

Color / Gradient

Zurück

Image

Nächster Schritt

Auf dieser Seite

BeispielVerwendungEigenschaftenPraxisbeispielAnimationBeim WeglassenVerwandte APIs