SSection `<s-section>`

関連するコンテンツをまとめるセクション。見出し、小見出し、アクションを任意で追加できます。 SSection は、Shopify Polaris の <s-section> web component 向けの型付き Vue 3 wrapper です。

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

ベストプラクティス

まとまりのあるコンテンツをグループ化する。 関連する情報であれ関連するコントロールであれ、各セクションには一貫した 1 つの役割を持たせます。そうすることで、セクションは視覚的なコンテナとして機能し、ページ構造に意味を加えます。
わかりやすい見出しを書く。 マーチャントは heading を流し読みして目的の場所を探すため、汎用的なタイトルに頼らず、中身を明示します。
ネストはコンテンツに必要な深さまでにする。 ネストしたセクションが影響するのは、見た目ではなく、見出しの階層とページのアウトラインです。最大でも 2〜3 段階にとどめ、構造を追加することでコンテンツがわかりやすくなる場合にだけネストします。
端から端まで広げたいコンテンツではパディングをなくす。 セクション全体を埋めるべきテーブルや画像などには padding="none" を使い、内側のコンテンツが独自に十分な余白を保っているか確認します。
見出しだけでは足りないときは accessibilityLabel を追加する。 画面上の見出しだけではスクリーンリーダーの利用者にセクションの目的が伝わらない場合は、不足している文脈を補うラベルを設定します。
適切なヘッダースロットを選ぶ。 ツールチップや件数など、見出しそのものを補足する情報は accessory に置きます。ステータスバッジなど、セクション全体に関する情報は supplemental に置きます。ボタンやメニューのようなアクションは supplemental では扱えないため、accessory に置きます。

vue

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

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

例

123 Main Street, Ottawa, ON, Canada

Delivery instructions: leave at front door.

vue

<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 は、その横のこのスロットに配置できます。
`graphic`	見出しを補強する装飾的なビジュアルで、見出しの前に描画されます。`size` が `base` の Icon を 1 つ、または `size` が `large` のアイコンのみの Badge（`icon` を設定し、テキストコンテンツなし）を受け付けます。セクションは見出しで識別されるため、このコンテンツは支援技術によって読み上げられません。また、セクションに `heading` がない場合はまったく描画されません。
`primary-action`	このコンテキストで利用できる主要な、または最も重要なアクションを表すプライマリアクションのボタンまたはリンクです。明確な階層を示すため、通常はセカンダリアクションよりも視覚的に目立つように表示されます。
`secondary-actions`	代替または補助的なアクションを提供する追加のアクションボタンやリンクです。プライマリアクションと比べて視覚的に控えめに表示されます。アクションと、その Menu を開くアイコンのみのアクティベーターを含む ButtonGroup は、シェブロンのアクティベーターを持つ 1 つのセグメント化されたグループとして描画されます。グループには `accessibilityLabel` が必要で、テキスト付きの Button 1 つと、それに続くテキストなしの Button 1 つ（`accessibilityLabel` と、Menu を開く `commandFor` を持つもの）をちょうど含む必要があります。どちらも `variant` は `secondary` または `auto` でなければなりません。
`supplemental`	見出しを補足するのではなく、セクション全体を説明するステータスやメタデータで、ヘッダーのインライン終端、アクションの前に描画されます。これはアクションではありません。Badge、Avatar、Text、Icon、Thumbnail、Tooltip 要素のみを受け付け、`accessory` と同じ prop の制約が適用されます。

SSection <s-section> ​

ベストプラクティス ​

例 ​

Props ​

Slots ​

SSection `<s-section>`

ベストプラクティス

例

Props

Slots