CapDriveSpacer
Asigne el espacio restante en la pila para empujar el contenido en ambos lados o reserve una distancia elástica para el contenido. minLength establece la longitud mínima, width o height explícitos pueden fijar el tamaño en la dirección correspondiente.
Ejemplo
function main() {
return (
<HStack>
<Text>A</Text>
<Spacer minLength={16} />
<Text>B</Text>
</HStack>
);
}
Uso
- Spacer no dibuja. Usa el espacio horizontal restante en HStack o vertical en VStack; minLength es el mínimo. width/height explícitos fijan el eje. No admite fondo, opacidad ni efectos.
- 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
minLength?numberEspacio flexible mínimo en el eje principal del Stack padre, en puntos.
0Propiedades comunes
width?number | "auto" | "fill"Anchura en puntos, tamaño automático o relleno del contenedor.
"auto"height?number | "auto" | "fill"Altura en puntos, tamaño automático o relleno del contenedor.
"auto"animations?SpacerAnimation[]Anima cambios de propiedad. duration/delay en segundos; from/to son extremos; repeat/autoreverse controlan repeticiones y wrap el período.
[{property: "minLength", duration: 0.25, curve: "easeInOut"}]key?string | numberIdentidad estable entre elementos hermanos.
""Ejemplo práctico
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>
);
}
Animación
widthheightminLengthAl 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.
| Propiedades | Al omitir |
|---|---|
minLength | 0 |