CapDrive
Guia de uso

Text

Exibir leitura, unidades ou texto descritivo. A fonte, tamanho da fonte, alinhamento, quebra de linha e truncamento podem ser definidos; o conteúdo é convertido uniformemente em uma string e os valores vazios são exibidos como vazios.

Exemplo

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

Uso

  • O conteúdo passa por toString(); null/undefined ficam vazios. Combine ícone e texto com HStack, sem View dentro de Text. Limite width antes de lineLimit/truncationMode. minimumScaleFactor=1 impede redução.
  • Dimensões numéricas usam pontos. auto mede o conteúdo; fill usa o espaço atribuído pelo pai. Dimensione o contêiner primeiro. fill e texto longo não ampliam um pai fixo.

Propriedades

children?TextContent | TextContent[]

Conteúdo de desenho filho.

fontSize?number

Tamanho da fonte em pontos.

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

Peso da fonte de ultraLight a black; regular é normal.

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

Estilo da fonte: default, rounded, monospaced ou serif.

Exemplo"default"
color?Paint

Cor de desenho, incluindo cores HDR.

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

Alinhamento do texto na largura disponível: leading, center ou trailing.

Exemplo"leading"
lineLimit?number | null

Máximo de linhas; null ou omissão permite quebra sem limite de linhas.

Exemplo1
truncationMode?"head" | "middle" | "tail"

Parte do texto a omitir quando não cabe: head, middle ou tail.

Exemplo"tail"
minimumScaleFactor?number

Escala mínima do texto quando falta espaço: 0.01–1; 1 impede redução.

Exemplo0.5
monospacedDigits?boolean

Dígitos com a mesma largura evitam saltos laterais quando o valor muda.

Exemplotrue
letterSpacing?number

Espaço extra entre caracteres, em pontos.

Exemplo0
contentAnimation?ContentAnimation

Transição na mudança de conteúdo. Escolha um type compatível; duration/delay em segundos.

Exemplo{type: "numericText"}
Propriedades comuns
width?number | "auto" | "fill"

Largura em pontos, tamanho automático ou preenchimento do contêiner.

Exemplo100
height?number | "auto" | "fill"

Altura em pontos, tamanho automático ou preenchimento do contêiner.

Exemplo80
padding?number

Espaçamento interno do conteúdo em pontos.

Exemplo0
x?number

Deslocamento visual em pontos: x à direita, y para baixo; não muda o espaço no layout.

Exemplo0
y?number

Deslocamento visual em pontos: x à direita, y para baixo; não muda o espaço no layout.

Exemplo0
transform?ViewTransform

Transforma o View inteiro sem mudar o layout. Translação em pontos, rotação/inclinação em graus, escala 1 sem mudança, âncoras 0–1.

Exemplo{rotation: 0}
background?Paint

Cor ou gradiente de fundo; clear é transparente.

Exemplo"clear"
opacity?number

Opacidade de todo o View: 0 transparente, 1 opaco.

Exemplo1
cornerRadius?number

Raio dos cantos em pontos.

Exemplo0
clipped?boolean

Recorta o desenho que ultrapassa os limites do View.

Exemplofalse
clip?"rectangle" | "ellipse"

Recorte rectangle ou ellipse; Material também aceita false para desativar.

Exemplo"rectangle"
mask?View | null

View de máscara alfa. Centralizada sem afetar o layout; null desativa a máscara.

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

Ordem entre elementos irmãos; valores maiores ficam na frente.

Exemplo0
blur?number

Raio do desfoque em pontos; 0 desativa.

Exemplo4
innerShadow?DrawingEffect

Cor, opacidade, raio de desfoque e deslocamento x/y do efeito; distâncias em pontos.

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

Cor, opacidade, raio de desfoque e deslocamento x/y do efeito; distâncias em pontos.

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

Cor da sombra externa.

ExemploHDR("black")
shadowOpacity?number

Opacidade da sombra entre 0 e 1; 0 oculta.

Exemplo0
shadowRadius?number

Raio de desfoque da sombra externa em pontos.

Exemplo4
shadowX?number

Deslocamento da sombra em pontos: x à direita, y para baixo.

Exemplo0
shadowY?number

Deslocamento da sombra em pontos: x à direita, y para baixo.

Exemplo2
animations?Animation[]

Anima mudanças de propriedade. duration/delay em segundos; from/to são extremos; repeat/autoreverse controlam repetição e wrap o período.

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

Identidade estável entre elementos irmãos.

Exemplo prático

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

Animação

Animação

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

Quando omitido

A tabela apresenta omissões verificadas na implementação. Exemplos não são padrões. Para resultado fixo, passe valor explícito; dimensões e cores de contexto não são constantes.

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

HStack

Symbol

Color / Gradient

Color / Gradient

Anterior

Image

Próximo passo

Nesta página

ExemploUsoPropriedadesExemplo práticoAnimaçãoQuando omitidoAPIs relacionadas