SPage <s-page>

顶层页面布局，包含标题、页面操作和内容区域。 SPage 是 Shopify Polaris <s-page> web component 的带类型 Vue 3 wrapper。

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

最佳实践

• 为每个页面设置标题。 将 heading 设为能描述商家当前所在页面的标题。
• 在流程中添加面包屑。 当页面是某个较大流程中的一步时，在 breadcrumb-actions slot 中放置返回的链接。
• 页眉操作应作用于整个页面。 只有适用于整个页面（而不是其中某一部分）的操作才放在页眉中。
• 限制操作的数量。 一个页面最多使用一个主要操作和三个次要操作。
• 页面底部不要放置操作。 不要在页面末尾放置任何操作。

<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>

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

示例

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	在页面侧边区域中显示的内容。仅当 inlineSize 为 "base" 时才会渲染此 slot。
breadcrumb-actions	页面的返回导航操作。只接受链接组件。
primary-action	页面的主操作。只接受单个 variant 为 primary 的按钮组件。
secondary-actions	页面的次要操作。只接受按钮组组件以及 variant 为 secondary 或 auto 的按钮组件。
supplemental-start	用于放置在主内容之前的内容的 slot，例如 s-banner。