SPage <s-page>

Top-level page layout, जिसमें heading, page actions और content areas होते हैं। SPage Shopify के Polaris <s-page> web component का typed Vue 3 wrapper है।

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

Best practices

• हर page को एक title दें। heading में ऐसा title सेट करें जो उस page का वर्णन करे जिस पर merchant है।
• किसी flow के भीतर breadcrumbs जोड़ें। जब page किसी बड़े flow का एक चरण हो, तो वापस जाने के links को breadcrumb-actions slot में रखें।
• Header actions को पूरे page के लिए रखें। Header में actions केवल तभी रखें जब वे पूरे page पर लागू हों, न कि उसके किसी एक हिस्से पर।
• Actions की संख्या सीमित रखें। एक page पर अधिकतम एक primary action और तीन secondary actions का उपयोग करें।
• Page के निचले हिस्से को actions से मुक्त रखें। Page के अंत में कोई भी action न रखें।

<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 की best practices (अंग्रेज़ी में) देखें।

उदाहरण

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	Type	विवरण
heading	string	page की मुख्य heading
inlineSize	"base" | "small" | "large"	page का inline size - base एक तय डिफ़ॉल्ट inline size के अनुरूप है - large whitespace के साथ पूरी चौड़ाई

Slots

Slot	विवरण
default	page component के अंदर दिखाई जाने वाली मुख्य page सामग्री, जो page की जानकारी और interface elements के लिए प्राथमिक container का काम करती है।
aside	page के aside section में दिखाई जाने वाली सामग्री। यह slot केवल तभी render होता है जब inlineSize "base" हो।
breadcrumb-actions	page के लिए पीछे जाने वाले navigation actions। केवल link components स्वीकार करता है।
primary-action	page का प्राथमिक action। केवल एक button component स्वीकार करता है जिसका variant primary हो।
secondary-actions	page के secondary actions। केवल button group और ऐसे button components स्वीकार करता है जिनका variant secondary या auto हो।
supplemental-start	मुख्य content से पहले आने वाले content के लिए slot, जैसे s-banner।