SHeading <s-heading>

Um título que nomeia uma seção da página. SHeading é o wrapper de Vue 3 tipado do web component <s-heading> do Shopify Polaris.

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

Boas práticas

• Dê um título a cada seção principal. Os títulos formam um esboço da interface que ajuda os lojistas a se orientarem e a ver como o conteúdo está organizado.
• Deixe o componente escolher o nível do título. Ele atribui o nível HTML (h2, h3, h4) conforme a profundidade de aninhamento, para que os leitores de tela recebam uma estrutura de documento correta sem que você defina os níveis manualmente.
• Seja específico. Diga o que a seção abrange, por exemplo "Detalhes do produto" ou "Detalhes do cliente" em vez de apenas "Detalhes".
• Limite as linhas só quando for preciso. lineClamp pode domar títulos longos em espaços apertados como cards, mas cortar um título pode esconder informações de que os lojistas precisam.
• Estilize títulos semelhantes da mesma forma. Títulos para o mesmo tipo de conteúdo, como todos os cards de uma lista, devem ter a mesma aparência.

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

Exemplo

Default headingRenders as a semantic heading element by default.Presentational headingSame visual style, but stripped from the accessibility tree's heading structure. A long heading that gets truncated to a single line via lineClamp

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

<template>
  <SHeading>Default heading</SHeading>
  <SParagraph>Renders as a semantic heading element by default.</SParagraph>

  <SHeading accessibilityRole="presentation">Presentational heading</SHeading>
  <SParagraph>Same visual style, but stripped from the accessibility tree's heading structure.</SParagraph>

  <SHeading :lineClamp="1" style="max-width: 220px">
    A long heading that gets truncated to a single line via lineClamp
  </SHeading>
</template>

Props

Prop	Tipo	Descrição
accessibilityRole	"heading" | "presentation" | "none"	O significado semântico do conteúdo do componente. Quando definido, o papel é usado pelas tecnologias assistivas para ajudar os usuários a navegar pela página. - heading: identifica o elemento como um título para as tecnologias assistivas. - none: remove o significado semântico do elemento de título. - presentation: remove o significado semântico do elemento de título.
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.
fontSize	"base" | "auto" | "small" | "large" | "large-100" | "large-200" | "large-300" | "large-400"	O tamanho da fonte do título. Os valores nomeados também aplicam a altura de linha e o espaçamento entre letras correspondentes: - 'small' corresponde a headingXs - 'base' corresponde a headingSm - 'large' / 'large-100' corresponde a headingMd - 'large-200' corresponde a headingLg - 'large-300' corresponde a headingXl - 'large-400' corresponde a heading2xl
lineClamp	number	Trunca o conteúdo de texto no número de linhas especificado.

Slots

Slot	Descrição
default	O texto do título exibido dentro do componente de título, que fornece um título ou cabeçalho de seção para o conteúdo.