Stack Pilha
Introdução
O componente Stack é um contêiner de layout de alto desempenho usado para agrupar e organizar componentes relacionados em um fluxo linear, vertical ou horizontalmente. Construído sobre CSS Flexbox, oferece controle preciso sobre alinhamentos, justificações, espaçamentos e quebras de layout responsivas.
O Stack está totalmente integrado como um bloco stack no Page Builder, permitindo que autores de conteúdo e desenvolvedores estruturem facilmente seções visuais, menus de navegação e estruturas de formulário diretamente no CMS.
Uso
Estes exemplos ilustram como os editores de conteúdo vinculam e estruturam layouts lineares.
1. Stack de layout horizontal
Organiza os elementos filhos sequencialmente ao longo do eixo horizontal X com espaçamentos personalizados. Excelente para itens de navegação horizontal, avatares ou emblemas de etiqueta.
{
"type": "stack",
"direction": "horizontal",
"gap": "4",
"children": [
{ "type": "badge", "text": "Item A", "colorPalette": "blue" },
{ "type": "badge", "text": "Item B", "colorPalette": "blue" },
{ "type": "badge", "text": "Item C", "colorPalette": "blue" }
]
}
2. Stack de fluxo vertical
Organiza os elementos filhos sequencialmente ao longo do eixo vertical Y. Perfeito para preferências de configuração padrão, destaques de landing page ou diretórios de cartões.
{
"type": "stack",
"direction": "vertical",
"gap": "3",
"children": [
{ "type": "text", "content": "Priority Option 1" },
{ "type": "text", "content": "Priority Option 2" }
]
}
3. Alternância responsiva de coluna para linha
Configura o layout para empilhar os elementos filhos verticalmente em dimensões de tela menores e organizá-los horizontalmente em telas de tablet/desktop automaticamente.
{
"type": "stack",
"direction": "{\"base\": \"column\", \"md\": \"row\"}",
"gap": "{\"base\": \"4\", \"md\": \"8\"}",
"children": [
{ "type": "button", "text": "Call to Action 1" },
{ "type": "button", "text": "Call to Action 2", "variant": "outline" }
]
}
Propriedades
| Propriedade | Tipo de campo CMS | Padrão | Descrição / opções suportadas |
|---|---|---|---|
Direção do stack (direction) | select \ | string | "vertical" |
Espaçamento (gap) | string | "8px" | Margens de espaço entre os elementos filhos dentro do stack. |
Alinhar elementos (align) | select | - | Alinhamento visual dos elementos ao longo do eixo transversal (Flexbox align-items).• Opções: "start", "center", "end", "stretch". |
Justificar elementos (justify) | select | - | Distribuição do espaço vazio ao longo do eixo principal (Flexbox justify-content).• Opções: "start", "center", "end", "between", "around". |
Conteúdo filho (children) | list | - | A coleção de blocos de layout ou visuais aninhados a empilhar dentro do contêiner. |
Classe personalizada (class) | string | - | Substituições de classes CSS personalizadas aplicadas diretamente ao contêiner do stack. |
Notas para desenvolvedores e acessibilidade
- Strings JSON responsivas: No Sveltia CMS, regras de estilo complexas por ponto de quebra (como recolher de linhas para colunas) podem ser definidas fornecendo um layout JSON stringificado às propriedades
directionegap. - Navegação acessível: Ao ordenar interativos ativos dentro de um stack (como fluxos de botões), preserve a sequência HTML padrão. Não dependa fortemente da reordenação de layout CSS (como
flex-direction: row-reverse), que pode não coincidir com o fluxo físico da tecla Tab. - Suporte a Flex Gap do navegador: A propriedade gap utiliza regras nativas
gapdo CSS Flexbox, garantindo layouts limpos sem a necessidade de substituições de margem negativa em navegadores web modernos móveis/desktop.