ป็อปเปอร์

ป็อปเปอร์เป็นยูทิลิตี้สำหรับการจัดตำแหน่งองค์ประกอบลอยตัวสัมพันธ์กับองค์ประกอบอ้างอิง โดยทั่วไปใช้สำหรับทูลทิป ดร็อปดาวน์ และเนื้อหาซ้อนทับอื่นๆ

คุณสมบัติหลัก

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

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

ป็อปเปอร์พื้นฐานต้องมีองค์ประกอบทริกเกอร์และเนื้อหาที่จะแสดง

<template>
  <spr-popper
    id="basic-example"
    distance="4"
    placement="bottom"
    :triggers="[]"
    :popper-hide-triggers="[]"
    :auto-hide="false"
    :delay="0"
  >
    <spr-button>คลิกสำหรับเมนู</spr-button>
    <template #content>
      <div class="spr-bg-white spr-rounded-lg spr-p-4 spr-shadow-lg">
        <h3 class="spr-mb-2 spr-text-lg spr-font-medium">ตัวเลือกเมนู</h3>
        <ul class="spr-space-y-2">
          <li class="spr-hover:bg-gray-50 spr-flex spr-items-center spr-gap-2 spr-rounded spr-p-2">
            <Icon icon="ph:user" class="spr-h-5 spr-w-5" />
            <span>โปรไฟล์</span>
          </li>
          <li class="spr-hover:bg-gray-50 spr-flex spr-items-center spr-gap-2 spr-rounded spr-p-2">
            <Icon icon="ph:gear" class="spr-h-5 spr-w-5" />
            <span>การตั้งค่า</span>
          </li>
          <li class="spr-hover:bg-gray-50 spr-flex spr-items-center spr-gap-2 spr-rounded spr-p-2">
            <Icon icon="ph:sign-out" class="spr-h-5 spr-w-5" />
            <span>ออกจากระบบ</span>
          </li>
        </ul>
      </div>
    </template>
  </spr-popper>
</template>

<script setup>
import { Icon } from '@iconify/vue';
</script>

การจัดตำแหน่ง

ป็อปเปอร์สามารถจัดตำแหน่งได้ในตำแหน่งต่างๆ สัมพันธ์กับองค์ประกอบทริกเกอร์

<template>
  <spr-popper id="top-popper" placement="top">
    <spr-button tone="information">
      <template #prefix-icon>
        <Icon icon="ph:arrow-up" />
      </template>
      ป็อปเปอร์ด้านบน
    </spr-button>
    <template #content>
      <div class="spr-bg-white spr-flex spr-items-center spr-gap-2 spr-rounded-lg spr-p-3 spr-shadow-lg">
        <Icon icon="ph:info" class="spr-h-5 spr-w-5 spr-text-blue-500" />
        <span>เนื้อหาที่จัดตำแหน่งด้านบน</span>
      </div>
    </template>
  </spr-popper>

  <!-- คล้ายกันสำหรับด้านขวา ล่าง และซ้าย -->
</template>

<script setup>
import { Icon } from '@iconify/vue';
</script>

การอ้างอิง API

พร็อพส์

ชื่อ	คำอธิบาย	ประเภท	ค่าเริ่มต้น
id	ตัวระบุที่ไม่ซ้ำสำหรับคอนเทนเนอร์ป็อปเปอร์ จำเป็นสำหรับการทำงานที่ถูกต้อง	string	-
placement	กำหนดตำแหน่งของป็อปเปอร์สัมพันธ์กับองค์ประกอบอ้างอิง รองรับ: 'auto', 'auto-start', 'auto-end', 'top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end'	string	'bottom'
triggers	อาร์เรย์ของอีเวนต์ที่จะทริกเกอร์ให้ป็อปเปอร์แสดง ค่าทั่วไปรวมถึง: click: แสดงเมื่อคลิก hover: แสดงเมื่อเลื่อนเมาส์เข้า focus: แสดงเมื่อโฟกัส touch: แสดงเมื่อสัมผัส อาร์เรย์ว่างหมายถึงการควบคุมด้วยตนเองผ่าน v-model	string[]	['click']
popper-hide-triggers	อาร์เรย์ของอีเวนต์ที่จะทริกเกอร์ให้ป็อปเปอร์ซ่อน ใช้ค่าเดียวกันกับทริกเกอร์ อาร์เรย์ว่างหมายถึงการควบคุมด้วยตนเอง	string[]	['click']
auto-hide	เมื่อเป็นจริง ป็อปเปอร์จะซ่อนอัตโนมัติเมื่อคลิกภายนอก	boolean	true
delay	การหน่วงเวลาเป็นมิลลิวินาทีก่อนแสดง/ซ่อนป็อปเปอร์ มีประโยชน์สำหรับการโต้ตอบแบบโฮเวอร์	number	0
distance	ระยะห่างเป็นพิกเซลระหว่างป็อปเปอร์กับองค์ประกอบอ้างอิง	number | string	"4"

สล็อต

ชื่อ	คำอธิบาย
default	องค์ประกอบทริกเกอร์ที่จะแสดง/ซ่อนเนื้อหาป็อปเปอร์เมื่อคลิก
content	เนื้อหาที่จะแสดงในป็อปเปอร์เมื่อถูกทริกเกอร์

การใช้ผลิตภัณฑ์