SPage <s-page>

Bố cục trang cấp cao nhất, với tiêu đề, các hành động của trang và các vùng nội dung. SPage là Vue 3 wrapper có type cho web component <s-page> của Shopify Polaris.

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

Best practices

• Đặt tiêu đề cho mọi trang. Đặt heading thành một tiêu đề mô tả trang mà người bán đang xem.
• Thêm breadcrumb khi trang nằm trong một luồng. Khi trang là một bước trong một luồng lớn hơn, hãy đặt các liên kết quay lại trong slot breadcrumb-actions.
• Hành động ở header phải áp dụng cho cả trang. Chỉ đặt hành động ở header khi chúng áp dụng cho toàn bộ trang, không phải cho một phần của trang.
• Giới hạn số lượng hành động. Dùng tối đa một hành động chính và ba hành động phụ trên một trang.
• Không đặt hành động ở cuối trang. Đừng đặt bất kỳ hành động nào ở cuối trang.

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

Xem best practices của Shopify cho <s-page> (tiếng Anh) để có hướng dẫn đầy đủ.

Ví dụ

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	Kiểu	Mô tả
heading	string	Tiêu đề chính của trang
inlineSize	"base" | "small" | "large"	Kích thước inline của trang - base tương ứng với một kích thước inline mặc định cố định - large toàn chiều rộng kèm khoảng trắng

Slots

Slot	Mô tả
default	Nội dung chính của trang hiển thị bên trong component page, đóng vai trò vùng chứa chính cho thông tin và các phần tử giao diện của trang.
aside	Nội dung hiển thị trong phần aside của trang. Slot này chỉ được render khi inlineSize là "base".
breadcrumb-actions	Các hành động điều hướng quay lại của trang. Chỉ chấp nhận component link.
primary-action	Hành động chính của trang. Chỉ chấp nhận một component button duy nhất có variant là primary.
secondary-actions	Các hành động phụ của trang. Chỉ chấp nhận component button group và button có variant là secondary hoặc auto.
supplemental-start	Slot cho nội dung đứng trước nội dung chính, chẳng hạn một s-banner.