SSection <s-section>

对相关内容进行分组，可选带有标题、副标题和操作。 SSection 是 Shopify Polaris <s-section> web component 的带类型 Vue 3 wrapper。

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

最佳实践

• 将相关内容归为一组。 让每个 section 只承担一项连贯的职责，无论是相关信息还是相关控件；这样它既是一个视觉容器，也能为页面结构增添含义。
• 编写描述性的标题。 商家会快速浏览 heading 来寻找方向，因此请说明其中的内容，而不是使用笼统的标题。
• 只按内容需要的深度嵌套。 嵌套的 section 影响的是标题层级和页面大纲，而不是外观。最多保持两到三层，并且只在额外的结构能让内容更清晰时才嵌套。
• 当内容需要贯穿边缘时去掉内边距。 对于应填满 section 的表格或图片等内容，使用 padding="none"，然后检查内部内容本身是否保留了足够的间距。
• 当标题不足以说明时添加 accessibilityLabel。 当屏幕上的标题无法让屏幕阅读器用户明白该 section 的用途时，为其提供一个补充缺失上下文的标签。
• 选择合适的页眉 slot。 修饰标题本身的细节（例如 tooltip 或计数）放在 accessory 中。关于整个 section 的信息（例如状态徽章）放在 supplemental 中。按钮或菜单等操作应放在 accessory 中，因为 supplemental 不接受操作。

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

参阅 Shopify 关于 <s-section> 的最佳实践（英文）以获取完整指南。

示例

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	类型	说明
accessibilityLabel	string	为屏幕阅读器等辅助技术描述组件用途或内容的标签。当仅凭可见内容无法清楚传达组件用途时，可用它提供额外的上下文。
heading	string	显示在区块顶部的标题文本。该标题为区块内容提供标题，并会根据嵌套深度自动使用合适的语义标题级别（h2、h3、h4），以保持正确的文档结构。
padding	"base" | "none"	应用于元素内容所有边的内边距。 - base：应用适合该元素的内边距。注意，如果在特定上下文中这是正确的设计决策，结果可能是没有内边距。 - none：移除元素内容的所有内边距。当区块内的元素需要延伸到区块边缘时很有用，例如全宽图片。此时，可使用内边距为 'base' 的 s-box 为其余内容恢复所需的内边距。heading 和标题栏操作会保留其内边距，因此可以与 none 搭配使用。
subheading	string	对标题进行补充说明的辅助文本，以弱化样式渲染在标题下方。它不是标题：不会在文档大纲中添加条目，不会改变区块子元素的标题级别，也不会作为标题的一部分被朗读。请将区分此区块与其他区块的内容保留在 heading 中，因为按标题导航的用户听到的正是它。

Slots

Slot	说明
default	区块组件中显示的内容。该组件将相关元素组合为一个逻辑单元，并可带有可选标题。
accessory	对标题进行限定的附加上下文信息，内联渲染在标题文本旁边。仅接受 Badge、Icon、Button、Menu、Text、Avatar、Thumbnail 和 Tooltip 元素。Text 的 tone、fontSize 和 fontWeight 必须为 auto；Icon、Avatar 和 Thumbnail 必须使用 size="base"；Badge 必须使用 size="base" 和 color="base"；Button 必须使用 inlineSize="auto"。附属元素的 interestFor 所指向的 Tooltip 可以放在此 slot 中，位于该元素旁边。
graphic	在标题之前渲染、用于强化标题的装饰性视觉元素。接受单个 size 为 base 的 Icon，或 size 为 large 的纯图标 Badge（设置了 icon 且无文本内容）。由于标题已用于标识该区块，此内容不会被辅助技术朗读；当区块没有 heading 时，它根本不会被渲染。
primary-action	主操作按钮或链接，代表当前上下文中最主要或最重要的操作。通常以比次要操作更高的视觉突出度显示，以建立清晰的层级。
secondary-actions	提供替代或辅助操作的附加操作按钮或链接。与主要操作相比，视觉上会被弱化。若 ButtonGroup 包含一个操作及其 Menu 的纯图标触发按钮，则会渲染为带有 V 形箭头触发按钮的一个分段组。该组需要 accessibilityLabel，并且必须恰好包含一个带文本的 Button，后接一个无文本、带有 accessibilityLabel 且 commandFor 指向要打开的 Menu 的 Button，两者的 variant 均为 secondary 或 auto。
supplemental	描述整个区块的状态或元数据，而不是对其标题进行限定，渲染在页眉的行内末端、所有操作之前。这不是操作。仅接受 Badge、Avatar、Text、Icon、Thumbnail 和 Tooltip 元素，prop 约束与 accessory 相同。