CapDrive
Guía de uso

Symbol

Utilice SF Symbols para dibujar iconos del sistema, como velocímetro o termómetro. Se puede configurar el tamaño de fuente del símbolo, el peso de la fuente y el método de coloración. La disponibilidad del símbolo específico depende del sistema del dispositivo.

Ejemplo

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

Uso

  • name es un identificador SF Symbols, no un archivo. fontSize escala el símbolo; width/height, el contenedor. paletteColors colorea capas. Un símbolo no disponible no se convierte en imagen.
  • 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

namestring

Nombre SF Symbols como speedometer; disponibilidad según el sistema operativo.

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

Tamaño relativo small, medium o large combinado con fontSize.

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

monochrome usa un color, hierarchical tonos, palette paletteColors, multicolor colores originales.

Ejemplo"monochrome"
color?Paint

Color de dibujo, incluidos los colores HDR.

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

De uno a tres colores de capas del símbolo en modo palette.

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

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

Ejemplo{type: "fade", duration: 0.25}
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 (
    <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>
  );
}

Animación

Animación

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

Text

HStack

Color / Gradient

CardContent

Anterior

RepeatedLayout

Siguiente paso

En esta página

EjemploUsoPropiedadesEjemplo prácticoAnimaciónAl omitirAPI relacionadas