CapDrive
Guia de uso

Symbol

Use SF Symbols para desenhar ícones do sistema, como velocímetro, termômetro. O tamanho da fonte do símbolo, a espessura da fonte e o método de coloração podem ser definidos. A disponibilidade do símbolo específico depende do sistema do dispositivo.

Exemplo

function main() {
  return (
    <Symbol
      name="speedometer"
      fontSize={36}
      renderingMode="hierarchical"
      color={$env.accent}
    />
  );
}

Uso

  • name é um identificador SF Symbols, não um arquivo. fontSize dimensiona o símbolo; width/height, o contêiner. paletteColors colore camadas. Símbolos indisponíveis no sistema não viram imagens.
  • 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

namestring

Nome SF Symbols, como speedometer; disponibilidade depende do sistema.

Exemplo"location.north.fill"
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"
imageScale?"small" | "medium" | "large"

Tamanho relativo small, medium ou large em conjunto com fontSize.

Exemplo"medium"
renderingMode?"monochrome" | "hierarchical" | "palette" | "multicolor"

monochrome usa uma cor; hierarchical usa tons; palette usa paletteColors; multicolor mantém as cores originais.

Exemplo"monochrome"
color?Paint

Cor de desenho, incluindo cores HDR.

ExemploHDR($env.foreground)
paletteColors?[Color] | [Color, Color] | [Color, Color, Color]

Uma a três cores para camadas do símbolo no modo palette.

Exemplo["red", "blue"]
contentAnimation?ContentAnimation

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

Exemplo{type: "fade", duration: 0.25}
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 (
    <HStack alignment="firstTextBaseline" spacing={8}>
      <Symbol
        name="speedometer"
        fontSize={32}
        renderingMode="hierarchical"
        color={$env.accent}
      />
      <Text fontSize={40}>78</Text>
      <Text fontSize={14}>km/h</Text>
    </HStack>
  );
}

Animação

Animação

widthheightpaddingxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYfontSizecolortransform.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"
imageScale"medium"
renderingMode"monochrome"
colorHDR($env.foreground)

Text

HStack

Color / Gradient

CardContent

Anterior

RepeatedLayout

Próximo passo

Nesta página

ExemploUsoPropriedadesExemplo práticoAnimaçãoQuando omitidoAPIs relacionadas