CapDrive
Guida all’uso

Text

Visualizza la lettura, le unità o il testo descrittivo. È possibile impostare il carattere, la dimensione del carattere, l'allineamento, il ritorno a capo e il troncamento della riga; il contenuto viene convertito uniformemente in una stringa e i valori vuoti vengono visualizzati come vuoti.

Esempio

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

Utilizzo

  • Il contenuto usa toString(); null/undefined restano vuoti. Combina icone e testo in HStack, senza View dentro Text. Limita width prima di lineLimit/truncationMode. minimumScaleFactor=1 impedisce la riduzione.
  • Le misure numeriche sono punti. auto misura il contenuto; fill usa lo spazio assegnato dal genitore. Dimensiona prima il contenitore: fill e testo lungo non ampliano un genitore fisso.

Proprietà

children?TextContent | TextContent[]

Contenuto di disegno figlio.

fontSize?number

Dimensione del carattere in punti.

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

Peso del carattere da ultraLight a black; regular è normale.

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

Disegno del font: default, rounded, monospaced o serif.

Esempio"default"
color?Paint

Colore di disegno, inclusi i colori HDR.

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

Allineamento del testo nella larghezza disponibile: leading, center o trailing.

Esempio"leading"
lineLimit?number | null

Numero massimo di righe; null o omissione permette a capo senza limite di righe.

Esempio1
truncationMode?"head" | "middle" | "tail"

Parte da omettere se il testo non entra: head, middle o tail.

Esempio"tail"
minimumScaleFactor?number

Scala minima del testo se manca spazio: 0.01–1; 1 impedisce la riduzione.

Esempio0.5
monospacedDigits?boolean

Cifre della stessa larghezza evitano spostamenti laterali al cambiare dei valori.

Esempiotrue
letterSpacing?number

Spazio aggiuntivo tra caratteri, in punti.

Esempio0
contentAnimation?ContentAnimation

Transizione al cambio di contenuto. Scegli un type supportato; duration/delay in secondi.

Esempio{type: "numericText"}
Proprietà comuni
width?number | "auto" | "fill"

Larghezza in punti, dimensione automatica o riempimento del contenitore.

Esempio100
height?number | "auto" | "fill"

Altezza in punti, dimensione automatica o riempimento del contenitore.

Esempio80
padding?number

Spaziatura interna del contenuto in punti.

Esempio0
x?number

Spostamento visivo in punti: x a destra, y in basso; non cambia lo spazio nel layout.

Esempio0
y?number

Spostamento visivo in punti: x a destra, y in basso; non cambia lo spazio nel layout.

Esempio0
transform?ViewTransform

Trasformazione globale senza cambiare il layout. Traslazione in punti, rotazione/inclinazione in gradi, scala 1 invariata, ancoraggi 0–1.

Esempio{rotation: 0}
background?Paint

Colore o gradiente di sfondo; clear è trasparente.

Esempio"clear"
opacity?number

Opacità dell’intero View: 0 trasparente, 1 opaco.

Esempio1
cornerRadius?number

Raggio degli angoli in punti.

Esempio0
clipped?boolean

Ritaglia il disegno oltre i limiti del View.

Esempiofalse
clip?"rectangle" | "ellipse"

Forma di ritaglio rectangle o ellipse; Material accetta anche false per disattivarlo.

Esempio"rectangle"
mask?View | null

View per la maschera alfa. Centrata senza modificare il layout; null disattiva la maschera.

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

Ordine tra elementi fratelli; valori più grandi appaiono davanti.

Esempio0
blur?number

Raggio della sfocatura in punti; 0 la disattiva.

Esempio4
innerShadow?DrawingEffect

Colore, opacità, raggio di sfocatura e offset x/y dell’effetto; distanze in punti.

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

Colore, opacità, raggio di sfocatura e offset x/y dell’effetto; distanze in punti.

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

Colore dell’ombra esterna.

EsempioHDR("black")
shadowOpacity?number

Opacità dell’ombra 0–1; 0 la nasconde.

Esempio0
shadowRadius?number

Raggio di sfocatura dell’ombra esterna in punti.

Esempio4
shadowX?number

Offset dell’ombra in punti: x a destra, y in basso.

Esempio0
shadowY?number

Offset dell’ombra in punti: x a destra, y in basso.

Esempio2
animations?Animation[]

Anima le modifiche alle proprietà. duration/delay in secondi; from/to sono estremi; repeat/autoreverse controllano le ripetizioni, wrap il periodo.

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

Identità stabile tra elementi fratelli.

Esempio pratico

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>
  );
}

Animazione

Animazione

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

Quando omesso

La tabella documenta omissioni verificate nell’implementazione. Gli esempi non sono valori predefiniti. Specifica valori per risultati fissi; misure e colori contestuali non sono costanti.

ProprietàQuando omesso
fontSize14
fontWeight"regular"
font"default"
monospacedDigitstrue
minimumScaleFactor1
lineLimitnull
alignment"center"
truncationMode"tail"
colorHDR($env.foreground)

HStack

Symbol

Color / Gradient

Color / Gradient

Precedente

Image

Passaggio successivo

In questa pagina

EsempioUtilizzoProprietàEsempio praticoAnimazioneQuando omessoAPI correlate