Rectangle

Disegna un rettangolo con angoli arrotondati opzionali da utilizzare con sfondi, barre di avanzamento e bordi. background riempie l'interno, stroke tratti, lineWidth e strokePosition controllano la larghezza e la posizione del tratto.

Esempio

function main() {
  return (
    <Rectangle
      width={160}
      height={80}
      cornerRadius={16}
      background={LinearGradient(['#A9E56F', '#30B3A2'])}
      stroke={$env.foreground}
      lineWidth={2}
      strokePosition="inside"
    />
  );
}

Utilizzo

background riempie, stroke contorna. cornerRadius arriva a metà lato corto. inside sta dentro, center attraversa il bordo, outside fuori; il genitore può tagliare i tratti esterni.
mask usa alfa: opaco mostra, trasparente nasconde. Bianco e nero con uguale alfa sono equivalenti. Non modifica il layout; assegna dimensioni e distingui dal ritaglio clipped.
background/stroke accettano Color o Gradient. Usa tre costruttori Gradient: posizioni e centri 0–1, raggi in punti. HDR avvolge un colore; luminosità dipende da dispositivo e ambiente.

Proprietà

background?Paint

Colore o gradiente di sfondo; clear è trasparente.

EsempioHDR($env.dark ? "white" : "black")

cornerRadius?number

Raggio degli angoli in punti.

Esempio0

stroke?Paint

Colore o gradiente del tratto; clear lo nasconde.

Esempio"clear"

lineWidth?number

Spessore del tratto in punti; 0 non disegna il tratto.

Esempio2

strokePosition?"inside" | "center" | "outside"

Posizione del tratto rispetto al contorno: inside, center o outside.

Esempio"inside"

lineCap?"round" | "butt" | "square"

Estremità: butt taglia, square prolunga in quadrato, round arrotonda.

Esempio"round"

lineJoin?"round" | "miter" | "bevel"

Forma delle giunzioni: miter, round o bevel.

Esempio"round"

dash?number[]

Lunghezze alternate di tratto e spazio in punti; array vuoto per linea continua.

Esempio[]

dashPhase?number

Spostamento del motivo tratteggiato in punti.

Esempio0

trimStart?number

Intervallo visibile trimStart–trimEnd in 0–1. Circle/Ellipse/Arc usano angoli.

Esempio0

trimEnd?number

Intervallo visibile trimStart–trimEnd in 0–1. Circle/Ellipse/Arc usano angoli.

Esempio1

Proprietà comuni

width?number | "auto" | "fill"

Larghezza in punti, dimensione automatica o riempimento del contenitore.

Esempio"fill"

height?number | "auto" | "fill"

Altezza in punti, dimensione automatica o riempimento del contenitore.

Esempio"fill"

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}

opacity?number

Opacità dell’intero View: 0 trasparente, 1 opaco.

Esempio1

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 spacing={20}>
      <Rectangle
        width={90}
        height={60}
        background="clear"
        stroke={$env.accent}
        lineWidth={8}
        strokePosition="inside"
      />
      <Rectangle
        width={90}
        height={60}
        background="clear"
        stroke={$env.accent}
        lineWidth={8}
        strokePosition="outside"
      />
    </HStack>
  );
}

Animazione

widthheightxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYtrimStarttrimEnddashPhasestrokelineWidthtransform.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
`cornerRadius`	`0`
`lineWidth`	`2`
`strokePosition`	`"inside"`
`trimStart`	`0`
`trimEnd`	`1`
`background`	`HDR($env.dark ? 'white' : 'black')`

Esempio

Utilizzo

Proprietà

Esempio pratico

Animazione

Quando omesso

Color / Gradient

ZStack

In questa pagina

Rectangle

Esempio

Utilizzo

Proprietà

Esempio pratico

Animazione

Quando omesso

API correlate

Color / Gradient

ZStack

In questa pagina