BaseStack

Põe blocos um embaixo do outro, a uma distância fixa, e tira as margens próprias deles. A página já empilha os blocos da tela (Modelo de página); o BaseStack é para dentro de um bloco: uma lista de links, um formulário, as partes de um painel.

• Medições do contrato
• Empenhos
• Termos aditivos

Uso

• Use quando um bloco tem várias partes, uma embaixo da outra, e precisa de espaço entre elas. Não escreva margin, padding nem mt-3 na tela: o lint dos projetos recusa.
• O corpo do BaseCard já é uma pilha de 16 px; não ponha um BaseStack só para isso.
• Para cartões lado a lado, use o BaseCardGrid.
• Com as="ul" ou as="ol", a lista perde o marcador e o recuo; cada item continua um <li>.

Intervalos

Medições do contrato

Valor do mês, acumulado e acumulado por item.

Primeiro bloco.

Segundo bloco, a 24 px do primeiro, como entre os blocos da página.

gap	Espaço	Quando
sm	8 px (--tj-space-2)	Linhas de um mesmo item, como o link e a descrição dele
md	16 px (--tj-space-4)	Partes de um bloco: texto, lista, ações
lg	24 px (--tj-page-gap)	Blocos inteiros, como na página

Anatomia

1. Pilha: o elemento de as, com os blocos um embaixo do outro.
2. Intervalo: o espaço de gap entre um bloco e o próximo.

Faça e não faça

Faça	Não faça
BaseStack as="ul" para a lista de atalhos de um cartão.	Uma <ul> com margin e padding escritos na tela.
gap="sm" entre um link e a linha que o explica.	mt-1 no texto de baixo.
Deixar o corpo do BaseCard empilhar o título, o texto e as ações.	Um BaseStack em volta de todo o conteúdo do cartão.

Estilo

Propriedade	Token
Intervalo sm	--tj-space-2
Intervalo md	--tj-space-4
Intervalo lg	--tj-page-gap
Margem dos blocos	zerada em cima e embaixo, para não somar ao intervalo

Código

<BaseStack as="ul" gap="md">
  <li v-for="link in links" :key="link.route">
    <BaseStack gap="sm">
      <BaseLink :href="link.route">{{ link.label }}</BaseLink>
      <BaseText variant="small" tone="muted">{{ link.description }}</BaseText>
    </BaseStack>
  </li>
</BaseStack>

Propriedades

Propriedade	Tipo	Padrão	Descrição
gap	'sm' | 'md' | 'lg'	'md'	Espaço entre os blocos: sm 8 px (linhas de um item), md 16 px (partes de um bloco), lg 24 px (como a página)
as	string	'div'	Elemento desenhado, como ul para uma lista (sem marcador e sem recuo) ou form

Slot	Conteúdo
padrão	Os blocos, na ordem em que aparecem

Acessibilidade

• Não há padrão do WAI-ARIA APG para pilha: ela é só layout. Com as, use o elemento que diz o que o conteúdo é (ul para lista, form para formulário), e o leitor de tela anuncia a lista e o número de itens.
• Não recebe foco.
• A ordem de leitura e de Tab é a ordem dos blocos no código.
• Testado com axe como div e como lista.