SHeading <s-heading>

Un encabezado que titula una sección de la página. SHeading es el wrapper de Vue 3 tipado del web component <s-heading> de Shopify Polaris.

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

Buenas prácticas

• Pon un encabezado a cada sección importante. Los encabezados forman un esquema de la interfaz que ayuda a los comerciantes a orientarse y a ver cómo está organizado el contenido.
• Deja que el componente elija el nivel del encabezado. Asigna el nivel HTML (h2, h3, h4) según la profundidad de anidamiento, de modo que los lectores de pantalla obtienen una estructura de documento correcta sin que tengas que definir los niveles a mano.
• Sé específico. Indica qué cubre la sección, por ejemplo "Product details" o "Customer details" en lugar de solo "Details".
• Limita las líneas solo cuando sea necesario. lineClamp puede contener los encabezados largos en espacios reducidos como las tarjetas, pero recortar un encabezado puede ocultar información que los comerciantes necesitan.
• Da el mismo estilo a los encabezados similares. Los encabezados del mismo tipo de contenido, como cada tarjeta de una lista, deben verse iguales.

Consulta las buenas prácticas de Shopify para <s-heading> (en inglés) para ver todas las recomendaciones.

Ejemplo

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	Descripción
accessibilityRole	"heading" | "presentation" | "none"	El significado semántico del contenido del componente. Cuando se establece, las tecnologías de asistencia usan el rol para ayudar a los usuarios a navegar por la página. - heading: identifica el elemento como un encabezado para las tecnologías de asistencia. - none: elimina el significado semántico del elemento de encabezado. - presentation: elimina el significado semántico del elemento de encabezado.
accessibilityVisibility	"visible" | "hidden" | "exclusive"	Cambia la visibilidad del elemento. - visible: el elemento es visible para todos los usuarios. - hidden: el elemento se elimina del árbol de accesibilidad, pero sigue siendo visible. - exclusive: el elemento se oculta visualmente, pero permanece en el árbol de accesibilidad.
fontSize	"base" | "auto" | "small" | "large" | "large-100" | "large-200" | "large-300" | "large-400"	El tamaño de fuente del encabezado. Los valores con nombre también aplican su altura de línea y espaciado entre letras correspondientes: - '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 el contenido de texto al número de líneas especificado.

Slots

Slot	Descripción
default	El texto del encabezado que se muestra dentro del componente de encabezado, que proporciona un título o un encabezado de sección para el contenido.