SStack <s-stack>

Organiza seus filhos em uma linha ou coluna com espaçamento e alinhamento consistentes. SStack é o wrapper de Vue 3 tipado do web component <s-stack> do Shopify Polaris.

import { SStack } from 'polaris-vue-elements'

Escrevendo seu próprio CSS em volta de <SStack>? Use as variáveis CSS do Polaris (--p-space-*, --p-color-*, …) para que seu layout combine com os componentes.

Boas práticas

• Deixe o espaçamento refletir as relações. Um gap pequeno indica que os itens pertencem juntos, enquanto um maior separa grupos distintos. Escolha o espaçamento que corresponda à hierarquia do seu conteúdo.
• Conte com a quebra de linha em stacks inline. Com direction="inline", os itens passam para uma nova linha quando falta espaço. Normalmente é isso que você quer, mas se precisar de controle exato sobre as quebras de linha ou várias linhas, recorra a outra abordagem de layout.
• Defina o alinhamento de propósito. O alinhamento padrão atende à maioria dos layouts. Ajuste alignItems ou justifyContent quando os itens tiverem tamanhos diferentes ou precisarem de um posicionamento específico.

<SStack direction="inline" gap="small-200" alignItems="center">
  <SBadge>Draft</SBadge>
  <SText>Last edited today</SText>
</SStack>

Veja as boas práticas da Shopify para <s-stack> (em inglês) para todas as recomendações.

Exemplo

Item 1Item 2Item 3

<script setup>
import { SStack, SBox, SText } from 'polaris-vue-elements'
</script>

<template>
  <SStack direction="inline" gap="large" alignItems="center">
    <SBox background="subdued" padding="base" borderRadius="200">
      <SText>Item 1</SText>
    </SBox>
    <SBox background="subdued" padding="base" borderRadius="200">
      <SText>Item 2</SText>
    </SBox>
    <SBox background="subdued" padding="base" borderRadius="200">
      <SText>Item 3</SText>
    </SBox>
  </SStack>
</template>

Props

Prop	Tipo	Descrição
accessibilityLabel	string	Um rótulo que descreve a finalidade ou o conteúdo do elemento. Quando definido, é anunciado aos usuários de tecnologias assistivas e oferece mais contexto a eles. Use-o apenas quando o conteúdo do elemento não oferecer contexto suficiente para usuários de tecnologias assistivas.
accessibilityRole	"generic" | "status" | "main" | "header" | "footer" | "section" | "region" | "aside" … (9 more)	Define o significado semântico do conteúdo do componente. Quando definido, o papel (role) é usado pelas tecnologias assistivas para ajudar os usuários a navegar pela página.
accessibilityVisibility	"visible" | "hidden" | "exclusive"	Altera a visibilidade do elemento. - visible: o elemento fica visível para todos os usuários. - hidden: o elemento é removido da árvore de acessibilidade, mas continua visível. - exclusive: o elemento fica visualmente oculto, mas permanece na árvore de acessibilidade.
alignContent	"normal" | "stretch" | "baseline" | "first baseline" | "last baseline" | "center" | "start" | "end" … (9 more)	Controla a distribuição das linhas ao longo do eixo de bloco quando o conteúdo quebra em várias linhas. Esta propriedade afeta apenas pilhas com conteúdo que quebra linha. Para pilhas de uma única linha, use alignItems.
alignItems	"normal" | "stretch" | "baseline" | "first baseline" | "last baseline" | "center" | "start" | "end" … (6 more)	Controla o alinhamento dos filhos ao longo do eixo de bloco (verticalmente em modos de escrita horizontais). Use para alinhar os itens perpendicularmente à direção da pilha - verticalmente em pilhas em linha ou horizontalmente em pilhas de bloco.
background	"subdued" | "base" | "strong" | "transparent"	A cor de fundo do componente.
blockSize	"auto" | "0"	O tamanho vertical do elemento em layouts padrão (altura em modos de escrita da esquerda para a direita ou da direita para a esquerda). O tamanho em bloco se ajusta de acordo com a direção da escrita: em layouts horizontais, controla a altura; em layouts verticais, controla a largura. Isso garante um comportamento consistente em diferentes direções de texto. Saiba mais sobre block-size.
border	BorderShorthand	Uma borda aplicada com sintaxe abreviada para especificar a largura, a cor e o estilo em uma única propriedade.
borderColor	"subdued" | "base" | "strong"	A cor da borda usando a escala de cores do design system. Quando definida, substitui o valor de cor especificado na propriedade border. Escolha entre subdued, base ou strong de acordo com a ênfase visual necessária.
borderRadius	MaybeAllValuesShorthandProperty<BoxBorderRadii>	O arredondamento dos cantos do elemento, usando a escala de raio do design system. Suporta a sintaxe de 1 a 4 valores para especificar raios diferentes por canto. Use isto para criar cantos arredondados ou elementos totalmente arredondados.
borderStyle	"" | MaybeAllValuesShorthandProperty<BoxBorderStyles>	O estilo visual da borda em todos os lados, como sólida, tracejada ou pontilhada. Quando definido, sobrescreve o valor de estilo especificado na propriedade border. Suporta a sintaxe de 1 a 4 valores para especificar estilos diferentes por lado.
borderWidth	"" | MaybeAllValuesShorthandProperty<"base" | "small-100" | "small" | "large" | "large-100" | "none">	A espessura da borda em todos os lados. Quando definida, sobrescreve o valor de largura especificado na propriedade border. Suporta a sintaxe de 1 a 4 valores para especificar larguras diferentes por lado.
columnGap	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more)	Ajusta o espaçamento entre os elementos no eixo em linha. Substitui o valor de coluna de gap. Aceita: - Um único valor de SpacingKeyword, como large-100 - Uma string de valor responsivo com o SpacingKeyword compatível como valor de consulta
direction	"block" | "inline"	A direção em que os filhos da pilha são posicionados dentro dela. Aceita: - Um único valor, inline ou block - Uma string de valor responsivo com os valores de direção suportados como valor de consulta
display	"auto" | "none"	O tipo de display externo do componente. O tipo externo define como o componente participa do layout de fluxo. - auto o valor inicial do componente. O valor real depende do componente e do contexto. - none oculta o componente e o remove da árvore de acessibilidade, tornando-o invisível para leitores de tela.
gap	MaybeResponsive<MaybeTwoValuesShorthandProperty<SpacingKeyword>>	Ajusta o espaçamento entre os elementos. Aceita: - Um único valor de SpacingKeyword aplicado aos dois eixos, como large-100 - Um par de valores, como large-100 large-500, para definir os eixos em linha e de bloco, respectivamente - Uma string de valor responsivo com o SpacingKeyword compatível como valor de consulta
inlineSize	"auto" | "0"	A largura em modos de escrita horizontais, ou a altura em modos de escrita verticais. Use isto para um dimensionamento relativo ao fluxo que se adapta à direção do texto. Saiba mais sobre inline-size.
justifyContent	"normal" | "stretch" | "center" | "start" | "end" | "unsafe center" | "unsafe start" | "unsafe end" … (6 more)	Controla a distribuição dos filhos ao longo do eixo em linha (horizontalmente em modos de escrita horizontais). Use para posicionar os itens ao longo do eixo principal da pilha - horizontalmente em pilhas em linha ou verticalmente em pilhas de bloco quando quebradas em várias linhas.
maxBlockSize	"none" | "0"	A altura máxima em modos de escrita horizontais, ou a largura máxima em modos de escrita verticais. Impede que o elemento cresça além desse tamanho. Saiba mais sobre max-block-size.
maxInlineSize	"none" | "0"	A largura máxima em modos de escrita horizontais, ou a altura máxima em modos de escrita verticais. Impede que o elemento cresça além desse tamanho. Saiba mais sobre max-inline-size.
minBlockSize	"0"	A altura mínima em modos de escrita horizontais, ou a largura mínima em modos de escrita verticais. Impede que o elemento encolha abaixo desse tamanho. Saiba mais sobre min-block-size.
minInlineSize	"0"	A largura mínima em modos de escrita horizontais, ou a altura mínima em modos de escrita verticais. Impede que o elemento encolha abaixo desse tamanho. Saiba mais sobre min-inline-size.
overflow	"visible" | "hidden"	Define o comportamento de overflow do elemento. - hidden: corta o conteúdo quando ele é maior que o contêiner do elemento. O elemento não poderá ser rolado e os usuários não conseguirão acessar o conteúdo cortado arrastando ou usando a roda do mouse. - visible: o conteúdo que ultrapassa o contêiner do elemento fica visível.
padding	MaybeResponsive<MaybeAllValuesShorthandProperty<PaddingKeyword>>	O padding aplicado a todas as bordas do componente. Suporta a sintaxe de 1 a 4 valores com valores relativos ao fluxo: - 1 valor se aplica a todos os lados - 2 valores se aplicam a block (topo/base) e inline (esquerda/direita) - 3 valores se aplicam a block-start (topo), inline (esquerda/direita) e block-end (base) - 4 valores se aplicam a block-start (topo), inline-end (direita), block-end (base) e inline-start (esquerda) Exemplos:* base, large none, base large-100 base small Use auto para herdar o padding do contêiner mais próximo com padding removido. Também aceita uma string de valor responsivo com o PaddingKeyword suportado como valor de consulta.
paddingBlock	MaybeResponsive<"" | MaybeTwoValuesShorthandProperty<PaddingKeyword>>	O espaçamento interno na direção de bloco (em cima e embaixo em modos de escrita horizontais). Aceita um único valor para os dois lados ou dois valores separados por espaço para block-start e block-end. Exemplo:* large none aplica large em cima e none embaixo. Substitui o valor de bloco de padding. Também aceita uma string de valor responsivo com o PaddingKeyword compatível como valor de consulta.
paddingBlockEnd	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more)	O espaçamento interno block-end (embaixo em modos de escrita horizontais). Substitui o valor block-end de paddingBlock. Também aceita uma string de valor responsivo com o PaddingKeyword compatível como valor de consulta.
paddingBlockStart	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more)	O espaçamento interno block-start (em cima em modos de escrita horizontais). Substitui o valor block-start de paddingBlock. Também aceita uma string de valor responsivo com o PaddingKeyword compatível como valor de consulta.
paddingInline	MaybeResponsive<"" | MaybeTwoValuesShorthandProperty<PaddingKeyword>>	O padding na direção em linha (esquerda e direita em modos de escrita horizontais). Aceita um único valor para os dois lados ou dois valores separados por espaço para inline-start e inline-end. Exemplo:* large none aplica large à esquerda e none à direita. Sobrescreve o valor em linha de padding. Também aceita uma string de valor responsivo com o PaddingKeyword suportado como valor de consulta.
paddingInlineEnd	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more)	O padding no fim da linha (direita em modos de escrita LTR, esquerda em RTL). Sobrescreve o valor inline-end de paddingInline. Também aceita uma string de valor responsivo com o PaddingKeyword suportado como valor de consulta.
paddingInlineStart	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more)	O padding no início da linha (esquerda em modos de escrita LTR, direita em RTL). Sobrescreve o valor inline-start de paddingInline. Também aceita uma string de valor responsivo com o PaddingKeyword suportado como valor de consulta.
rowGap	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more)	Ajusta o espaçamento entre os elementos no eixo de bloco. Substitui o valor de linha de gap. Aceita: - Um único valor de SpacingKeyword, como large-100 - Uma string de valor responsivo com o SpacingKeyword compatível como valor de consulta

Algumas colunas de tipo acima estão truncadas para facilitar a leitura; a união completa está disponível nos tipos TypeScript gerados da biblioteca (src/lib/generated/types.ts).

Slots

Slot	Descrição
default	Os elementos filhos exibidos dentro do componente de pilha, organizados vertical ou horizontalmente com espaçamento uniforme.