CapDriveSpacer
Assegna lo spazio rimanente nello Stack per spingere il contenuto su entrambi i lati o riservare una distanza elastica per il contenuto. minLength imposta la lunghezza minima, width esplicito o height possono fissare la dimensione nella direzione corrispondente.
Esempio
function main() {
return (
<HStack>
<Text>A</Text>
<Spacer minLength={16} />
<Text>B</Text>
</HStack>
);
}
Utilizzo
- Spacer non disegna. Usa spazio orizzontale residuo in HStack o verticale in VStack; minLength è il minimo. width/height espliciti fissano l’asse. Niente sfondo, opacità o effetti.
- 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à
minLength?numberSpazio flessibile minimo sull’asse principale dello Stack genitore, in punti.
0Proprietà comuni
width?number | "auto" | "fill"Larghezza in punti, dimensione automatica o riempimento del contenitore.
"auto"height?number | "auto" | "fill"Altezza in punti, dimensione automatica o riempimento del contenitore.
"auto"animations?SpacerAnimation[]Anima le modifiche alle proprietà. duration/delay in secondi; from/to sono estremi; repeat/autoreverse controllano le ripetizioni, wrap il periodo.
[{property: "minLength", duration: 0.25, curve: "easeInOut"}]key?string | numberIdentità stabile tra elementi fratelli.
""Esempio pratico
function main() {
return (
<VStack spacing={16}>
<HStack width={240}>
<Text>A</Text>
<Spacer minLength={20} />
<Text>B</Text>
</HStack>
<HStack width={240}>
<Text>A</Text>
<Spacer width={20} />
<Text>B</Text>
</HStack>
</VStack>
);
}
Animazione
widthheightminLengthQuando 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 |
|---|---|
minLength | 0 |