SSection <s-section>

Agrupa conteúdo relacionado, com título, subtítulo e ações opcionais. SSection é o wrapper de Vue 3 tipado do web component <s-section> do Shopify Polaris.

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

Boas práticas

• Agrupe o conteúdo que pertence junto. Dê a cada seção uma única função coerente, seja reunir informações relacionadas ou controles relacionados; assim ela funciona como um contêiner visual e dá significado à estrutura da página.
• Escreva títulos descritivos. Os lojistas passam os olhos pelo heading para se orientar, então diga o que há dentro em vez de recorrer a um título genérico.
• Aninhe só até onde o conteúdo precisar. Uma seção aninhada afeta a hierarquia de títulos e a estrutura da página, e não a aparência dela. Limite-se a dois ou três níveis no máximo, e aninhe apenas quando a estrutura extra deixar o conteúdo mais claro.
• Remova o padding quando o conteúdo deve ir de borda a borda. Use padding="none" para coisas como tabelas ou imagens que devem preencher a seção, e depois verifique se o conteúdo interno mantém espaçamento suficiente por conta própria.
• Adicione um accessibilityLabel quando o título não for suficiente. Quando o título exibido na tela deixar o propósito da seção pouco claro para quem usa leitores de tela, dê a essas pessoas um rótulo que complete o contexto que falta.
• Escolha o slot de cabeçalho certo. Coloque em accessory os detalhes que modificam o próprio título, como um tooltip ou uma contagem. Coloque em supplemental as informações sobre a seção como um todo, como um badge de status. Ações como um botão ou menu pertencem a accessory, já que supplemental não as aceita.

<SSection heading="Products" padding="none">
  <STable>
    <!-- … -->
  </STable>
</SSection>

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

Exemplo

123 Main Street, Ottawa, ON, CanadaDelivery instructions: leave at front door.

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

<template>
  <SSection heading="Shipping address">
    <SParagraph>123 Main Street, Ottawa, ON, Canada</SParagraph>
    <SDivider />
    <SParagraph color="subdued">Delivery instructions: leave at front door.</SParagraph>
  </SSection>
</template>

Props

Prop	Tipo	Descrição
accessibilityLabel	string	Um rótulo que descreve a finalidade ou o conteúdo do componente para tecnologias assistivas, como leitores de tela. Use-o para fornecer contexto adicional quando o conteúdo visível sozinho não transmite com clareza a finalidade do componente.
heading	string	O texto do título exibido no topo da seção. Este título dá nome ao conteúdo da seção e usa automaticamente o nível de título semântico adequado (h2, h3, h4) com base na profundidade de aninhamento, para manter uma estrutura de documento correta.
padding	"base" | "none"	O padding aplicado a todas as bordas do conteúdo do elemento. - base: aplica o padding adequado ao elemento. Observe que isso pode resultar em nenhum padding, se essa for a decisão de design correta em um contexto específico. - none: remove todo o padding do conteúdo do elemento. Isso pode ser útil quando os elementos dentro da seção precisam se estender até a borda da seção, por exemplo, uma imagem de largura total. Nesse caso, use s-box com padding 'base' para recuperar o padding desejado no restante do conteúdo. O heading e as ações do cabeçalho mantêm o seu padding, então podem ser combinados com none.
subheading	string	Texto de apoio que complementa o título, exibido abaixo dele com um estilo atenuado. Não é um título: não adiciona nenhuma entrada à estrutura do documento, não altera o nível de título dos filhos da seção e não é anunciado como parte do título. Mantenha em heading o que diferencia esta seção de outra, pois é isso que ouve quem navega por títulos.

Slots

Slot	Descrição
default	O conteúdo exibido dentro do componente de seção, que agrupa elementos relacionados em uma unidade lógica com um título opcional.
accessory	Informações contextuais adicionais que complementam o título, exibidas em linha ao lado do texto do título. Aceita apenas elementos Badge, Icon, Button, Menu, Text, Avatar, Thumbnail e Tooltip. Text deve usar tone, fontSize e fontWeight com valor auto; Icon, Avatar e Thumbnail devem usar size="base"; Badge deve usar size="base" e color="base"; Button deve usar inlineSize="auto". Um Tooltip para o qual aponta o interestFor de um elemento acessório pode ser colocado neste slot ao lado dele.
graphic	Um elemento visual decorativo que reforça o título e é exibido antes dele. Aceita um único Icon com size igual a base ou um Badge apenas com ícone (icon definido, sem conteúdo de texto) com size igual a large. O título identifica a seção, por isso as tecnologias assistivas não anunciam este conteúdo, e ele não é exibido quando a seção não tem heading.
primary-action	O botão ou link de ação principal, que representa a ação principal ou mais importante disponível neste contexto. Normalmente é exibido com mais destaque visual do que as ações secundárias, para estabelecer uma hierarquia clara.
secondary-actions	Botões ou links de ação adicionais que oferecem ações alternativas ou complementares. Têm menos ênfase visual do que a ação principal. Um ButtonGroup que contém uma ação e o ativador apenas com ícone do seu Menu é exibido como um único grupo segmentado com um ativador em forma de chevron. O grupo precisa de um accessibilityLabel e deve conter exatamente um Button com texto seguido de um Button sem texto que tenha um accessibilityLabel e um commandFor que abra um Menu, ambos com variant igual a secondary ou auto.
supplemental	Status ou metadados que descrevem a seção como um todo, em vez de complementar o título, exibidos no final em linha (inline-end) do cabeçalho, antes de qualquer ação. Não é uma ação. Aceita apenas elementos Badge, Avatar, Text, Icon, Thumbnail e Tooltip, com as mesmas restrições de props de accessory.