CapDriveSpacer
Aloque o espaço restante na pilha para enviar conteúdo em ambos os lados ou reserve uma distância elástica para o conteúdo. minLength define o comprimento mínimo, width ou height explícito pode fixar o tamanho na direção correspondente.
Exemplo
function main() {
return (
<HStack>
<Text>A</Text>
<Spacer minLength={16} />
<Text>B</Text>
</HStack>
);
}
Uso
- Spacer não desenha. Usa espaço horizontal restante em HStack e vertical em VStack; minLength é o mínimo. width/height explícitos fixam o eixo. Não aceita fundo, opacidade ou efeitos.
- Dimensões numéricas usam pontos. auto mede o conteúdo; fill usa o espaço atribuído pelo pai. Dimensione o contêiner primeiro. fill e texto longo não ampliam um pai fixo.
Propriedades
minLength?numberEspaço flexível mínimo no eixo principal do Stack pai, em pontos.
0Propriedades comuns
width?number | "auto" | "fill"Largura em pontos, tamanho automático ou preenchimento do contêiner.
"auto"height?number | "auto" | "fill"Altura em pontos, tamanho automático ou preenchimento do contêiner.
"auto"animations?SpacerAnimation[]Anima mudanças de propriedade. duration/delay em segundos; from/to são extremos; repeat/autoreverse controlam repetição e wrap o período.
[{property: "minLength", duration: 0.25, curve: "easeInOut"}]key?string | numberIdentidade estável entre elementos irmãos.
""Exemplo prático
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>
);
}
Animação
widthheightminLengthQuando omitido
A tabela apresenta omissões verificadas na implementação. Exemplos não são padrões. Para resultado fixo, passe valor explícito; dimensões e cores de contexto não são constantes.
| Propriedades | Quando omitido |
|---|---|
minLength | 0 |