SHeading <s-heading>

Un titre qui intitule une section de page. SHeading est le wrapper Vue 3 typé du web component <s-heading> de Shopify Polaris.

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

Bonnes pratiques

• Donnez un titre à chaque section importante. Les titres forment un plan de l'interface qui aide les marchands à s'orienter et à comprendre l'organisation du contenu.
• Laissez le composant choisir le niveau de titre. Il attribue le niveau HTML (h2, h3, h4) selon la profondeur d'imbrication, si bien que les lecteurs d'écran obtiennent une structure de document correcte sans que vous ayez à définir les niveaux à la main.
• Soyez précis. Dites ce que couvre la section, par exemple "Product details" ou "Customer details" plutôt que simplement "Details".
• Ne limitez le nombre de lignes qu'en cas de nécessité. lineClamp peut contenir les titres longs dans les espaces restreints comme les cartes, mais tronquer un titre peut masquer des informations dont les marchands ont besoin.
• Stylisez de la même façon les titres similaires. Les titres d'un même type de contenu, comme chaque carte d'une liste, doivent se ressembler.

Consultez les bonnes pratiques de Shopify pour <s-heading> (en anglais) pour l'ensemble des recommandations.

Exemple

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	Type	Description
accessibilityRole	"heading" | "presentation" | "none"	La signification sémantique du contenu du composant. Lorsqu'il est défini, le rôle est utilisé par les technologies d'assistance pour aider les utilisateurs à naviguer dans la page. - heading : identifie l'élément comme un titre pour les technologies d'assistance. - none : supprime la signification sémantique de l'élément de titre. - presentation : supprime la signification sémantique de l'élément de titre.
accessibilityVisibility	"visible" | "hidden" | "exclusive"	Modifie la visibilité de l'élément. - visible : l'élément est visible par tous les utilisateurs. - hidden : l'élément est retiré de l'arbre d'accessibilité mais reste visible. - exclusive : l'élément est masqué visuellement mais reste dans l'arbre d'accessibilité.
fontSize	"base" | "auto" | "small" | "large" | "large-100" | "large-200" | "large-300" | "large-400"	La taille de police du titre. Les valeurs nommées appliquent aussi la hauteur de ligne et l'espacement des lettres correspondants : - 'small' correspond à headingXs - 'base' correspond à headingSm - 'large' / 'large-100' correspond à headingMd - 'large-200' correspond à headingLg - 'large-300' correspond à headingXl - 'large-400' correspond à heading2xl
lineClamp	number	Tronque le contenu textuel au nombre de lignes indiqué.

Slots

Slot	Description
default	Le texte du titre affiché dans le composant heading, qui fournit un titre ou un en-tête de section pour le contenu.