CapDriveSpacer
Allouez l'espace restant dans la pile pour pousser le contenu des deux côtés ou réserver une distance élastique pour le contenu. minLength définit la longueur minimale, explicite width ou height peut fixer la taille dans la direction correspondante.
Exemple
function main() {
return (
<HStack>
<Text>A</Text>
<Spacer minLength={16} />
<Text>B</Text>
</HStack>
);
}
Utilisation
- Spacer ne dessine rien. Il prend l’espace horizontal restant dans HStack, vertical dans VStack ; minLength est un minimum. width/height explicites fixent un axe. Aucun fond, opacité ou effet visuel.
- Les dimensions numériques sont en points. auto mesure le contenu, fill utilise l’espace alloué par le parent. Dimensionnez d’abord le conteneur ; fill et un long texte n’agrandissent pas un parent fixe.
Propriétés
minLength?numberEspace flexible minimal sur l’axe principal du Stack parent, en points.
0Propriétés communes
width?number | "auto" | "fill"Largeur en points, taille automatique ou remplissage du parent.
"auto"height?number | "auto" | "fill"Hauteur en points, taille automatique ou remplissage du parent.
"auto"animations?SpacerAnimation[]Anime les changements de propriété. duration/delay en secondes ; from/to définissent les extrémités ; repeat/autoreverse la répétition, wrap la période.
[{property: "minLength", duration: 0.25, curve: "easeInOut"}]key?string | numberIdentifiant stable parmi les éléments frères.
""Exemple pratique
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>
);
}
Animation
widthheightminLengthEn cas d’omission
Le tableau décrit les omissions vérifiées dans l’implémentation. Les exemples de propriétés ne sont pas des valeurs par défaut. Pour un résultat fixe, passez une valeur explicite ; tailles et couleurs contextuelles ne sont pas constantes.
| Propriétés | En cas d’omission |
|---|---|
minLength | 0 |