CapDrive
Guida all’uso

Symbol

Usa SF Symbols per disegnare icone di sistema, come tachimetro, termometro. È possibile impostare la dimensione del carattere del simbolo, il peso del carattere e il metodo di colorazione. La disponibilità del simbolo specifico dipende dal sistema del dispositivo.

Esempio

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

Utilizzo

  • name è un nome SF Symbols, non un file. fontSize dimensiona il simbolo; width/height il contenitore. paletteColors colora i livelli. Un simbolo assente dal sistema non diventa un’immagine.
  • 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à

namestring

Nome SF Symbols, ad esempio speedometer; disponibilità secondo il sistema.

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

Dimensione relativa small, medium o large combinata con fontSize.

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

monochrome usa un colore, hierarchical sfumature, palette paletteColors, multicolor i colori originali.

Esempio"monochrome"
color?Paint

Colore di disegno, inclusi i colori HDR.

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

Da uno a tre colori per i livelli del simbolo in modalità palette.

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

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

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

Animazione

Animazione

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

Text

HStack

Color / Gradient

CardContent

Precedente

RepeatedLayout

Passaggio successivo

In questa pagina

EsempioUtilizzoProprietàEsempio praticoAnimazioneQuando omessoAPI correlate