SBox <s-box>

Um contêiner genérico para espaçamento interno, fundo, borda, raio e dimensionamento. SBox é o wrapper de Vue 3 tipado do web component <s-box> do Shopify Polaris.

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

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

Boas práticas

• Use-o como um contêiner genérico. SBox cuida de espaçamento, bordas e fundos para agrupar conteúdo. Quando você precisar de uma disposição específica, como linhas ou colunas, use SStack ou SGrid.
• Verifique primeiro se há um componente mais significativo. Se algo como SSection ou SBanner já descreve o que o conteúdo é, prefira-o. Componentes feitos para um propósito transmitem uma intenção mais clara e oferecem melhor acessibilidade.
• Pense nas telas menores. Um layout que fica bem no desktop pode quebrar no celular, então ajuste o espaçamento e o layout com valores responsivos em vez de fixar tamanhos.
• Descreva regiões e conteúdo interativo. Quando uma box marca uma região distinta ou contém conteúdo interativo, defina accessibilityRole e accessibilityLabel para que os usuários de leitores de tela possam entender e navegar pela estrutura.
• Evite aninhamento profundo. Empilhar boxes dentro de boxes deixa o markup complexo e a estilização difícil de manter. Procure uma estrutura mais simples ou um componente de layout mais adequado.

<SBox accessibilityRole="region" accessibilityLabel="Shipping summary" padding="base" border="base">
  <!-- … -->
</SBox>

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

Exemplo

background="subdued"background="strong"bordered box

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

<template>
  <div style="display: flex; gap: 8px; flex-wrap: wrap">
    <SBox background="subdued" padding="base" borderRadius="200">
      <SText>background="subdued"</SText>
    </SBox>
    <SBox background="strong" padding="base" borderRadius="200">
      <SText>background="strong"</SText>
    </SBox>
    <SBox
      background="base"
      padding="base"
      borderRadius="200"
      borderWidth="small"
      borderColor="strong"
      borderStyle="solid"
    >
      <SText>bordered box</SText>
    </SBox>
  </div>
</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.
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.
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.
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.
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.

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	O conteúdo exibido dentro do componente box, que funciona como um contêiner flexível para organizar e estilizar outros componentes.