แผงด้านข้างแบบซ้อน

คอมโพเนนต์ StackingSidepanel ให้วิธีการที่มีประสิทธิภาพในการแสดงแผงด้านข้างหลายแผงที่ซ้อนกันในแนวนอนข้างๆ กัน สิ่งนี้สร้างลำดับชั้นภาพและการไหลของการนำทางที่สมบูรณ์แบบสำหรับกระบวนการหลายขั้นตอน อินเทอร์เฟซแบบเจาะลึก หรือมุมมองหลัก-รายละเอียด

ภาพรวม

แผงด้านข้างแบบซ้อนเหมาะสำหรับ:

• เวิร์กโฟลว์หลายขั้นตอน: นำผู้ใช้ผ่านขั้นตอนตามลำดับโดยไม่สูญเสียบริบท
• มุมมองหลัก-รายละเอียด: แสดงรายการในแผงหนึ่งและรายละเอียดในอีกแผงหนึ่ง
• การนำทางที่ซ้อนกัน: อนุญาตให้ผู้ใช้เจาะลึกไปยังระดับเนื้อหาที่ลึกขึ้น
• ข้อมูลที่เกี่ยวข้อง: แสดงเนื้อหาเสริมในขณะที่รักษาเนื้อหาหลักให้มองเห็นได้

คุณลักษณะสำคัญ

• การเปิดเผยแบบก้าวหน้า: แสดงข้อมูลในความก้าวหน้าทางตรรกะ
• รักษาบริบท: ผู้ใช้สามารถเห็นแผงก่อนหน้าได้ในขณะที่ทำงานในแผงปัจจุบัน
• การกำหนดค่าที่ยืดหยุ่น: ปรับแต่งความกว้าง แอนิเมชัน และการเปลี่ยน
• การออกแบบที่ตอบสนอง: ทำงานได้ดีบนขนาดหน้าจอต่างๆ
• การเข้าถึง: ออกแบบด้วยการนำทางด้วยแป้นพิมพ์และโปรแกรมอ่านหน้าจอ

สำคัญ

คอมโพเนนต์ StackingSidepanel ออกแบบมาเพื่อทำงานกับแผงด้านข้างที่วางตำแหน่งด้านขวาเท่านั้น ตรวจสอบให้แน่ใจว่าแผงด้านข้างทั้งหมดภายในแผงด้านข้างแบบซ้อนถูกวางตำแหน่งด้านขวาและมีพร็อพส์ is-stacking ตั้งค่าเป็น true

การใช้งานพื้นฐาน

แผงที่ใช้งานอยู่: ไม่มี

<template>
  <spr-button @click="stackingSidepanel?.showPanel('sidepanel-1')">แสดงแผง 1</spr-button>
  <span class="spr-body-md">แผงที่ใช้งานอยู่: {{ activePanelText }}</span>

  <spr-stacking-sidepanel ref="stacking-sidepanel" v-model:stack="activePanel" @update:stack="activePanelsHandler">
    <template #sidepanel-1> <!-- แผงด้านข้างแบบซ้อนใช้สล็อตที่มีชื่อที่กำหนดเอง ตรวจสอบให้แน่ใจว่าชื่อสล็อตไม่ซ้ำกัน -->
      <!-- แผงด้านข้างแบบซ้อนรองรับเฉพาะแผงด้านข้างที่วางตำแหน่งด้านขวาเท่านั้น นอกจากนี้ ให้ตั้งค่า `is-stacking` เป็น true -->
      <spr-sidepanel
        size="sm"
        position="right"
        :is-stacking="true"
        header-title="แผงด้านข้าง 1"
        @close="stackingSidepanel?.hidePanel('sidepanel-1')"
      >
        <div class="spr-p-size-spacing-2xs">
          <spr-button @click="stackingSidepanel?.showPanel('sidepanel-2')">แสดงแผง 2</spr-button>
        </div>
      </spr-sidepanel>
    </template>
    <template #sidepanel-2>
      <spr-sidepanel
        size="md"
        position="right"
        :is-stacking="true"
        header-title="แผงด้านข้าง 2"
        @close="stackingSidepanel?.hidePanel('sidepanel-2')"
      >
        <div class="spr-p-size-spacing-2xs">
          <spr-button @click="stackingSidepanel?.showPanel('sidepanel-3')">แสดงแผง 3</spr-button>
        </div>
      </spr-sidepanel>
    </template>
    <template #sidepanel-3>
      <spr-sidepanel
        size="lg"
        position="right"
        :is-stacking="true"
        header-title="แผงด้านข้าง 3"
        @close="stackingSidepanel?.hidePanel('sidepanel-3')"
      >
        <div class="spr-p-size-spacing-2xs">
          <spr-button @click="stackingSidepanel?.hidePanel('sidepanel-3')">ปิดแผง 3</spr-button>
        </div>
      </spr-sidepanel>
    </template>
  </spr-stacking-sidepanel>
</template>

<script lang="ts" setup>
import { ref, useTemplateRef } from 'vue';

const activePanel = ref<string[]>([]);
const stackingSidepanel = useTemplateRef("stacking-sidepanel"); // ใช้การอ้างอิงคอมโพเนนต์เพื่อเข้าถึงเมธอดที่เปิดเผย

const activePanelText = ref("ไม่มี");
const activePanelsHandler = (panel: string[]) => {
  activePanelText.value = panel.length > 0 ? panel.join(', ') : 'ไม่มี';
}
</script>

ข้อมูลอ้างอิง API

พร็อพส์

ชื่อ	คำอธิบาย	ประเภท	ค่าเริ่มต้น
stack	อาร์เรย์ของชื่อแผงที่ใช้งานอยู่ ใช้กับ v-model:stack สำหรับการผูกสองทาง	string[]	[]

อีเวนต์

ชื่อ	คำอธิบาย	พารามิเตอร์
update:stack	ปล่อยออกมาทุกครั้งที่กองแผงเปลี่ยนแปลง	(panels: string[])

เมธอดที่เปิดเผย

ชื่อ	คำอธิบาย	พารามิเตอร์
showPanel	แสดงแผงตามชื่อสล็อต	(name: string)
hidePanel	ซ่อนแผงตามชื่อสล็อต	(name: string)

สล็อต

ชื่อ	คำอธิบาย
สล็อตที่มีชื่อ	แต่ละแผงจะแสดงในสล็อตที่มีชื่อ ใช้ไวยากรณ์ <template #panelName> เพื่อกำหนดเนื้อหาสำหรับแต่ละแผง ตรวจสอบให้แน่ใจว่าชื่อสล็อตไม่ซ้ำกันเพื่อหลีกเลี่ยงความขัดแย้ง

แนวทางปฏิบัติที่ดีที่สุด

แนวทาง	คำอธิบาย
รักษาลำดับชั้นบริบท	ออกแบบแผงเพื่อแสดงลำดับชั้นข้อมูลที่ชัดเจน โดยแต่ละแผงใหม่จะเปิดเผยเนื้อหาที่ละเอียดหรือเฉพาะเจาะจงมากขึ้น
ขนาดแผงที่สอดคล้องกัน	พิจารณาใช้ขนาดแผงที่สอดคล้องกันหรือความก้าวหน้าทางตรรกะของขนาด (เช่น แคบไปกว้าง) เพื่อรักษาความกลมกลืนทางภาพ
เส้นทางการนำทางที่ชัดเจน	ให้วิธีที่ชัดเจนในการนำทางระหว่างแผง เช่น ปุ่ม "กลับ" หรือ breadcrumb
จำกัดความลึกของกอง	เพื่อป้องกันการเลื่อนแนวนอนที่มากเกินไป จำกัดจำนวนแผงที่เปิดพร้อมกันไว้ที่ 3-4 แผงสูงสุด
การพึ่งพาผลแผง	เมื่อแผงหลักถูกปิด พิจารณาว่าผลแผงย่อยควรปิดโดยอัตโนมัติหรือไม่เพื่อรักษาความสัมพันธ์ทางตรรกะ
การพิจารณาประสิทธิภาพ	สำหรับเนื้อหาแผงที่ซับซ้อน ใช้การโหลดแบบ lazy หรือการแสดงผลแบบมีเงื่อนไขเพื่อปรับปรุงประสิทธิภาพ
การออกแบบที่ตอบสนอง	ตรวจสอบให้แน่ใจว่าพฤติกรรมการซ้อนทำงานได้ดีบนขนาดหน้าจอที่แตกต่างกัน โดยอาจยุบเป็นมุมมองแผงเดียวบนอุปกรณ์มือถือ