SSection <s-section>

Agrupa contenido relacionado, con un encabezado, un subencabezado y acciones opcionales. SSection es el wrapper de Vue 3 tipado del web component <s-section> de Shopify Polaris.

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

Buenas prácticas

• Agrupa el contenido que va junto. Da a cada sección una única función coherente, ya sea información relacionada o controles relacionados; así funciona como contenedor visual y aporta significado a la estructura de la página.
• Escribe encabezados descriptivos. Los comerciantes leen el heading por encima para orientarse, así que indica qué contiene la sección en lugar de recurrir a un título genérico.
• Anida solo tanto como el contenido lo requiera. Una sección anidada afecta a la jerarquía de encabezados y al esquema de la página, no a su aspecto. Limítate a dos o tres niveles como máximo, y anida solo cuando la estructura adicional haga más claro el contenido.
• Quita el padding cuando el contenido deba ir de borde a borde. Usa padding="none" para elementos como tablas o imágenes que deban llenar la sección, y luego comprueba que el contenido interior mantenga suficiente espaciado propio.
• Añade un accessibilityLabel cuando el encabezado no sea suficiente. Cuando el encabezado visible no deje clara la función de la sección para quienes usan lectores de pantalla, dales una etiqueta que aporte el contexto que falta.
• Elige el slot de encabezado adecuado. Coloca los detalles que modifican el propio encabezado, como un tooltip o un contador, en accessory. Coloca la información sobre la sección en su conjunto, como un badge de estado, en supplemental. Las acciones, como un botón o un menú, van en accessory, ya que supplemental no las admite.

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

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

Ejemplo

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	Descripción
accessibilityLabel	string	Una etiqueta que describe el propósito o el contenido del componente para tecnologías de asistencia como los lectores de pantalla. Úsala para aportar contexto adicional cuando el contenido visible por sí solo no transmite con claridad el propósito del componente.
heading	string	El texto del encabezado que se muestra en la parte superior de la sección. Este encabezado proporciona un título para el contenido de la sección y usa automáticamente el nivel de encabezado semántico adecuado (h2, h3, h4) según la profundidad de anidamiento para mantener una estructura de documento correcta.
padding	"base" | "none"	El relleno aplicado a todos los bordes del contenido del elemento. - base: aplica el relleno adecuado para el elemento. Ten en cuenta que puede no aplicar relleno si esa es la decisión de diseño correcta en un contexto concreto. - none: elimina todo el relleno del contenido del elemento. Puede ser útil cuando los elementos dentro de la sección deben extenderse hasta el borde de la sección, por ejemplo, una imagen a ancho completo. En ese caso, usa s-box con un relleno de 'base' para recuperar el relleno deseado en el resto del contenido. El heading y las acciones del encabezado conservan su relleno, por lo que pueden combinarse con none.
subheading	string	Texto de apoyo que amplía el encabezado y se muestra debajo de él con un estilo atenuado. No es un encabezado: no añade ninguna entrada al esquema del documento, no cambia el nivel de encabezado de los hijos de la sección y no se anuncia como parte del encabezado. Mantén lo que distingue esta sección de otra en heading, ya que es lo que oye quien navega por encabezados.

Slots

Slot	Descripción
default	El contenido que se muestra dentro del componente de sección, que agrupa elementos relacionados en una unidad lógica con un encabezado opcional.
accessory	Información contextual adicional que matiza el encabezado y se muestra en línea junto a su texto. Solo acepta elementos Badge, Icon, Button, Menu, Text, Avatar, Thumbnail y Tooltip. Text debe usar tone, fontSize y fontWeight con valor auto; Icon, Avatar y Thumbnail deben usar size="base"; Badge debe usar size="base" y color="base"; Button debe usar inlineSize="auto". Un Tooltip al que apunte el interestFor de un elemento accesorio puede colocarse en este slot junto a él.
graphic	Un elemento visual decorativo que refuerza el encabezado y se muestra antes de él. Acepta un único Icon con una size de base, o un Badge solo con icono (icon definido, sin contenido de texto) con una size de large. El encabezado identifica la sección, por lo que las tecnologías de asistencia no anuncian este contenido, y no se muestra en absoluto cuando la sección no tiene heading.
primary-action	El botón o enlace de acción principal, que representa la acción principal o más importante disponible en este contexto. Normalmente se muestra con mayor prominencia visual que las acciones secundarias para establecer una jerarquía clara.
secondary-actions	Botones o enlaces de acción adicionales que ofrecen acciones alternativas o complementarias. Tienen menos énfasis visual que la acción principal. Un ButtonGroup que contiene una acción y el activador solo con icono de su Menu se muestra como un único grupo segmentado con un activador de chevron. El grupo necesita un accessibilityLabel y debe contener exactamente un Button con texto seguido de un Button sin texto que tenga un accessibilityLabel y un commandFor que abra un Menu, ambos con una variant de secondary o auto.
supplemental	Estado o metadatos que describen la sección en su conjunto en lugar de calificar su encabezado; se muestra en el extremo final (inline-end) del encabezado, antes de cualquier acción. No es una acción. Solo acepta elementos Badge, Avatar, Text, Icon, Thumbnail y Tooltip, con las mismas restricciones de props que accessory.