SScrollBox <s-scroll-box>

Um contêiner que rola seu conteúdo quando ele transborda. SScrollBox é o wrapper de Vue 3 tipado do web component <s-scroll-box> do Shopify Polaris.

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

Exemplo

Scrollable row 1Scrollable row 2Scrollable row 3Scrollable row 4Scrollable row 5Scrollable row 6Scrollable row 7Scrollable row 8

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

<template>
  <!-- maxBlockSize only accepts the "none"/"0" keywords, so an arbitrary pixel cap is
       set as a plain style attribute (it passes through untyped, see the quirks guide). -->
  <SScrollBox
    style="max-height: 160px"
    overflow="auto"
    border="base"
    borderRadius="200"
    padding="base"
  >
    <SBox
      v-for="n in 8"
      :key="n"
      padding="small"
      paddingBlockEnd="small"
      borderColor="subdued"
      borderWidth="small"
      borderStyle="solid"
    >
      <SText>Scrollable row {{ n }}</SText>
    </SBox>
  </SScrollBox>
</template>

Props

Prop	Tipo	Descrição
accessibilityLabel	string	Um rótulo que descreve o contêiner de rolagem para tecnologias assistivas.
accessibilityRole	"generic" | "region"	Define o significado semântico do conteúdo do componente.
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	"auto" | "hidden" | "auto auto" | "auto hidden" | "hidden auto" | "hidden hidden"	Define o comportamento de overflow do elemento.
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.
scrollMargin	"0" | "0 0" | "0 0 0" | "0 0 0 0"	Margem de rolagem do elemento (sintaxe abreviada de 1 a 4 valores, como no CSS).
scrollPadding	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more)	Deslocamento dos pontos de alinhamento do ajuste de rolagem (scroll snap).
snapType	"none" | "mandatory" | "proximity"	Controla o comportamento de ajuste de rolagem (scroll snap).

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).

Events

Event	Tipo
scroll	CustomEvent
scrolltoedge	CustomEvent

Escute-os com listeners no estilo @scroll em <SScrollBox>.

Slots

Slot	Descrição
default	O conteúdo do ScrollBox.