CapDrive
Guía de uso

Text

Muestra lectura, unidades o texto descriptivo. Se puede configurar la fuente, el tamaño de la fuente, la alineación, el ajuste de línea y el truncamiento; el contenido se convierte uniformemente en una cadena y los valores vacíos se muestran como vacíos.

Ejemplo

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

Uso

  • El contenido usa toString(); null/undefined quedan vacíos. Combina iconos y texto con HStack, sin Views dentro de Text. Limita width antes de lineLimit/truncationMode. minimumScaleFactor=1 impide reducir.
  • Las medidas numéricas son puntos. auto mide el contenido y fill usa el espacio asignado. Define primero el contenedor: fill y un texto largo no amplían un padre fijo.

Propiedades

children?TextContent | TextContent[]

Contenido de dibujo hijo.

fontSize?number

Tamaño de fuente en puntos.

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

Grosor de letra desde ultraLight hasta black; regular es normal.

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

Diseño tipográfico: default, rounded, monospaced o serif.

Ejemplo"default"
color?Paint

Color de dibujo, incluidos los colores HDR.

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

Alineación del texto en su ancho: leading, center o trailing.

Ejemplo"leading"
lineLimit?number | null

Máximo de líneas; null u omisión permite saltos sin límite de líneas.

Ejemplo1
truncationMode?"head" | "middle" | "tail"

Parte del texto que se omite al no caber: head, middle o tail.

Ejemplo"tail"
minimumScaleFactor?number

Escala mínima del texto si falta espacio: 0.01–1; 1 impide reducirlo.

Ejemplo0.5
monospacedDigits?boolean

Dígitos de igual ancho para evitar saltos laterales al cambiar valores.

Ejemplotrue
letterSpacing?number

Espaciado adicional entre caracteres, en puntos.

Ejemplo0
contentAnimation?ContentAnimation

Transición al cambiar contenido. Elige un type compatible; duration/delay en segundos.

Ejemplo{type: "numericText"}
Propiedades comunes
width?number | "auto" | "fill"

Anchura en puntos, tamaño automático o relleno del contenedor.

Ejemplo100
height?number | "auto" | "fill"

Altura en puntos, tamaño automático o relleno del contenedor.

Ejemplo80
padding?number

Relleno interior del contenido en puntos.

Ejemplo0
x?number

Desplazamiento visual en puntos: x a la derecha, y hacia abajo, sin cambiar el espacio del diseño.

Ejemplo0
y?number

Desplazamiento visual en puntos: x a la derecha, y hacia abajo, sin cambiar el espacio del diseño.

Ejemplo0
transform?ViewTransform

Transformación global sin alterar el diseño. Traslación en puntos, giro/inclinación en grados, escala 1 sin cambios, anclajes 0–1.

Ejemplo{rotation: 0}
background?Paint

Color o degradado de fondo; clear es transparente.

Ejemplo"clear"
opacity?number

Opacidad de todo el View: 0 transparente, 1 opaco.

Ejemplo1
cornerRadius?number

Radio de las esquinas en puntos.

Ejemplo0
clipped?boolean

Recorta el dibujo que sobresale de los límites del View.

Ejemplofalse
clip?"rectangle" | "ellipse"

Recorte rectangle o ellipse; Material también admite false para desactivarlo.

Ejemplo"rectangle"
mask?View | null

View de máscara alfa. Centrada sin afectar al diseño; null desactiva la máscara.

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

Orden entre elementos hermanos; los valores mayores aparecen delante.

Ejemplo0
blur?number

Radio de desenfoque en puntos; 0 lo desactiva.

Ejemplo4
innerShadow?DrawingEffect

Color, opacidad, radio de desenfoque y desplazamiento x/y del efecto; distancias en puntos.

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

Color, opacidad, radio de desenfoque y desplazamiento x/y del efecto; distancias en puntos.

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

Color de la sombra exterior.

EjemploHDR("black")
shadowOpacity?number

Opacidad de la sombra de 0 a 1; 0 la oculta.

Ejemplo0
shadowRadius?number

Radio de desenfoque de la sombra, en puntos.

Ejemplo4
shadowX?number

Desplazamiento de sombra en puntos: x derecha, y abajo.

Ejemplo0
shadowY?number

Desplazamiento de sombra en puntos: x derecha, y abajo.

Ejemplo2
animations?Animation[]

Anima cambios de propiedad. duration/delay en segundos; from/to son extremos; repeat/autoreverse controlan repeticiones y wrap el período.

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

Identidad estable entre elementos hermanos.

Ejemplo práctico

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

Animación

Animación

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

Al omitir

La tabla documenta omisiones comprobadas en la implementación. Los ejemplos no son valores predeterminados. Especifica valores para resultados fijos; tamaños y colores del contexto no son constantes.

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

HStack

Symbol

Color / Gradient

Color / Gradient

Anterior

Image

Siguiente paso

En esta página

EjemploUsoPropiedadesEjemplo prácticoAnimaciónAl omitirAPI relacionadas