SHeading <s-heading>

ページのセクションにタイトルを付ける見出し。 SHeading は、Shopify Polaris の <s-heading> web component 向けの型付き Vue 3 wrapper です。

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

ベストプラクティス

• 主要なセクションにはすべて見出しを付ける。 見出しはインターフェースのアウトラインを形づくり、マーチャントが目的の場所を見つけ、コンテンツの構成を把握するのに役立ちます。
• 見出しレベルはコンポーネントに任せる。 コンポーネントはネストの深さから HTML のレベル（h2、h3、h4）を割り当てるため、レベルを手動で設定しなくても、スクリーンリーダーは正しい文書構造を得られます。
• 具体的にする。 単に「Details」とするのではなく、「Product details」や「Customer details」のように、セクションが扱う内容を示します。
• 行数の制限は必要なときだけにする。 lineClamp を使うと、カードのような狭いスペースで長い見出しを収められますが、見出しを途中で切るとマーチャントに必要な情報が隠れてしまうことがあります。
• 同じ種類の見出しは同じスタイルにする。 リスト内のすべてのカードなど、同じ種類のコンテンツの見出しは、同じ見た目にそろえます。

詳しいガイダンスについては、<s-heading> に関する Shopify のベストプラクティス（英語）を参照してください。

例

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"	コンポーネントのコンテンツのセマンティックな意味です。設定すると、そのロールは支援技術によって、ユーザーがページ内を移動するのを助けるために使用されます。 - heading: 支援技術に対して、要素を見出しとして識別させます。 - none: 見出し要素からセマンティックな意味を取り除きます。 - presentation: 見出し要素からセマンティックな意味を取り除きます。
accessibilityVisibility	"visible" | "hidden" | "exclusive"	要素の表示状態を変更します。 - visible: 要素はすべてのユーザーに表示されます。 - hidden: 要素はアクセシビリティツリーから削除されますが、表示されたままです。 - exclusive: 要素は視覚的に非表示になりますが、アクセシビリティツリーには残ります。
fontSize	"base" | "auto" | "small" | "large" | "large-100" | "large-200" | "large-300" | "large-400"	見出しのフォントサイズです。名前付きの値は、対応する line-height と letter-spacing も適用します: - 'small' は headingXs に対応 - 'base' は headingSm に対応 - 'large' / 'large-100' は headingMd に対応 - 'large-200' は headingLg に対応 - 'large-300' は headingXl に対応 - 'large-400' は heading2xl に対応
lineClamp	number	テキストコンテンツを指定した行数で切り詰めます。

Slots

Slot	説明
default	見出しコンポーネント内に表示される見出しテキストです。コンテンツのタイトルやセクションヘッダーを提供します。