SHeading <s-heading>

作为页面区块标题的标题文字。 SHeading 是 Shopify Polaris <s-heading> web component 的带类型 Vue 3 wrapper。

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

最佳实践

• 为每个主要部分设置标题。 标题构成了界面的大纲，帮助商家找到方向并了解内容是如何组织的。
• 让组件决定标题级别。 组件会根据嵌套深度分配 HTML 级别（h2、h3、h4），因此无需手动设置级别，屏幕阅读器就能获得正确的文档结构。
• 表述要具体。 说明该部分的内容，例如用“产品详情”或“客户详情”，而不是只写“详情”。
• 只在必要时限制行数。 lineClamp 可以在卡片等狭小空间中控制较长的标题，但截断标题可能会隐藏商家需要的信息。
• 同类标题使用相同样式。 同类内容的标题（例如列表中每张卡片的标题）应保持一致的外观。

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

示例

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	类型	说明
accessibilityRole	"heading" | "presentation" | "none"	组件内容的语义含义。设置后，辅助技术将使用该 role 帮助用户浏览页面。 - heading：向辅助技术将元素标识为标题。 - none：移除标题元素的语义含义。 - presentation：移除标题元素的语义含义。
accessibilityVisibility	"visible" | "hidden" | "exclusive"	更改元素的可见性。 - visible：元素对所有用户可见。 - hidden：元素从无障碍树中移除，但仍然可见。 - exclusive：元素在视觉上隐藏，但仍保留在无障碍树中。
fontSize	"base" | "auto" | "small" | "large" | "large-100" | "large-200" | "large-300" | "large-400"	标题的字号。命名值还会应用相应的行高和字间距： - 'small' 对应 headingXs - 'base' 对应 headingSm - 'large' / 'large-100' 对应 headingMd - 'large-200' 对应 headingLg - 'large-300' 对应 headingXl - 'large-400' 对应 heading2xl
lineClamp	number	将文本内容截断为指定的行数。

Slots

Slot	说明
default	标题组件中显示的标题文本，用于为内容提供标题或章节标题。