SDivider <s-divider>

Uma linha horizontal ou vertical que separa conteúdo. SDivider é o wrapper de Vue 3 tipado do web component <s-divider> do Shopify Polaris.

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

Boas práticas

• Separe apenas conteúdos realmente diferentes. Divisores fazem sentido entre seções claramente distintas. Em excesso, deixam a interface poluída e fragmentada, então verifique se o espaço em branco agruparia o conteúdo igualmente bem.
• Ajuste o peso à separação. Deixe o destaque de um divisor refletir a importância da separação: uma quebra entre seções principais pode usar color="strong", enquanto um agrupamento menor pede uma linha mais sutil ou apenas espaço.
• Siga a direção do layout. Defina direction para que a linha atravesse o fluxo do conteúdo que ela separa, seja entre itens empilhados verticalmente, seja entre itens dispostos lado a lado.
• Tente o espaçamento primeiro. As props de espaçamento dos seus componentes de layout muitas vezes agrupam o conteúdo de forma mais limpa do que uma linha. Adicione um divisor para deixar as coisas mais claras, não como substituto de um espaçamento bem planejado.

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

Exemplo

Content above the divider.Content below the divider.A stronger divider variant.

<script setup>
import { SDivider, SParagraph } from 'polaris-vue-elements'
</script>

<template>
  <SParagraph>Content above the divider.</SParagraph>
  <SDivider />
  <SParagraph>Content below the divider.</SParagraph>
  <SDivider color="strong" />
  <SParagraph color="subdued">A stronger divider variant.</SParagraph>
</template>

Props

Prop	Tipo	Descrição
color	"base" | "strong"	O destaque visual da linha divisória. - base: divisória padrão para a maioria das separações (padrão) - strong: divisória mais destacada para quebras de seção importantes
direction	"block" | "inline"	A orientação da linha divisória, usando propriedades lógicas. - inline: divisória horizontal para separar conteúdo empilhado verticalmente - block: divisória vertical para separar conteúdo disposto horizontalmente