SPage <s-page>

見出し、ページアクション、コンテンツ領域を持つ最上位のページレイアウト。 SPage は、Shopify Polaris の <s-page> web component 向けの型付き Vue 3 wrapper です。

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

ベストプラクティス

• すべてのページにタイトルを付ける。 heading に、マーチャントが今いるページを表すタイトルを設定します。
• フローの中ではパンくずリストを追加する。 ページが大きなフローの 1 ステップである場合は、breadcrumb-actions スロットに戻るためのリンクを置きます。
• ヘッダーのアクションはページ全体に関するものにする。 ヘッダーにアクションを置くのは、ページの一部ではなく、ページ全体に適用される場合だけにします。
• アクションの数を制限する。 1 つのページで使うのは、プライマリアクション 1 つとセカンダリアクション 3 つまでにします。
• ページの末尾にはアクションを置かない。 ページの最後にはアクションを配置しないでください。

<SPage heading="Edit product">
  <template #breadcrumb-actions>
    <SLink href="/products">Products</SLink>
  </template>
  <template #primary-action>
    <SButton variant="primary">Save</SButton>
  </template>
  <template #secondary-actions>
    <SButton>Duplicate</SButton>
    <SButton>Archive</SButton>
  </template>
  <!-- … -->
</SPage>

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

例

No orders have been placed yet.Create order

<script setup>
import { SPage, SSection, SParagraph, SButton } from 'polaris-vue-elements'
</script>

<template>
  <SPage heading="Orders">
    <template #primary-action>
      <SButton variant="primary">Create order</SButton>
    </template>

    <SSection heading="Recent activity">
      <SParagraph>No orders have been placed yet.</SParagraph>
    </SSection>
  </SPage>
</template>

Props

Prop	型	説明
heading	string	ページのメイン見出しです
inlineSize	"base" | "small" | "large"	ページのインラインサイズです - base は既定のデフォルトのインラインサイズに対応します - large は余白付きの全幅です

Slots

Slot	説明
default	ページコンポーネント内に表示されるメインのページコンテンツです。ページの情報やインターフェース要素のための主要なコンテナとして機能します。
aside	ページの aside セクションに表示するコンテンツです。このスロットは inlineSize が "base" の場合にのみレンダリングされます。
breadcrumb-actions	ページの「戻る」ナビゲーションアクションです。リンクコンポーネントのみを受け付けます。
primary-action	ページのプライマリアクションです。variant が primary の単一のボタンコンポーネントのみを受け付けます。
secondary-actions	ページのセカンダリアクションです。ボタングループコンポーネントと、variant が secondary または auto のボタンコンポーネントのみを受け付けます。
supplemental-start	メインコンテンツの前に配置するコンテンツ（s-banner など）用のスロットです。