SPage <s-page>

제목, 페이지 작업, 콘텐츠 영역을 갖춘 최상위 페이지 레이아웃입니다. SPage은(는) Shopify Polaris <s-page> web component를 위한 타입이 지정된 Vue 3 wrapper입니다.

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

모범 사례

• 모든 페이지에 제목을 지정하세요. heading에 판매자가 보고 있는 페이지를 설명하는 제목을 설정합니다.
• 흐름 안에서는 breadcrumb를 추가하세요. 페이지가 더 큰 흐름의 한 단계라면 breadcrumb-actions 슬롯에 이전으로 돌아가는 링크를 넣습니다.
• 헤더 액션은 페이지 전체에 적용되는 것만 두세요. 페이지의 일부가 아니라 페이지 전체에 적용되는 액션만 헤더에 배치합니다.
• 액션 수를 제한하세요. 한 페이지에는 주요 액션 최대 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처럼 메인 콘텐츠 앞에 오는 콘텐츠를 위한 슬롯입니다.