ดรอปดาวน์

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

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

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

vue

<template>
  <div class="spr-flex spr-items-center spr-gap-4">
    <!-- Button trigger dropdown -->
    <spr-dropdown
      id="sample-dropdownBasic1"
      v-model="dropdownModel.dropdownBasic1"
      :menu-list="menuList"
      width="100px"
      popper-width="200px"
    >
      <spr-button class="spr-w-full" tone="success" has-icon>
        <span>Button</span>
        <Icon icon="ph:caret-down" />
      </spr-button>
    </spr-dropdown>

    <!-- Chips trigger dropdown -->
    <spr-dropdown
      id="sample-dropdownBasic2"
      v-model="dropdownModel.dropdownBasic2"
      :menu-list="menuList"
      width="100px"
      popper-width="200px"
    >
      <spr-chips class="spr-w-full" label="Chips" />
    </spr-dropdown>

    <!-- Lozenge trigger dropdown -->
    <spr-dropdown
      id="sample-dropdownBasic3"
      v-model="dropdownModel.dropdownBasic3"
      :menu-list="menuList"
      width="100px"
      popper-width="200px"
    >
      <spr-lozenge class="spr-w-full" label="Lozange" />
    </spr-dropdown>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import { Icon } from '@iconify/vue';

const dropdownModel = ref({
  dropdownBasic1: '',
  dropdownBasic2: '',
  dropdownBasic3: '',
});

const menuList = ref([
  { text: 'Google', value: 'https://www.google.com' },
  { text: 'GitHub', value: 'https://github.com' },
  { text: 'Gmail', value: 'https://mail.google.com' },
]);
</script>

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

เมนูดรอปดาวน์สามารถจัดตำแหน่งได้หลายวิธีสัมพันธ์กับองค์ประกอบทริกเกอร์ พร็อพส์ 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 - จัดตำแหน่งทางซ้ายของทริกเกอร์

vue

<template>
  <!-- Auto placement -->
  <spr-dropdown id="dropdown-auto" v-model="selectedValue" :menu-list="menuList" placement="auto" popper-width="200px">
    <spr-button class="spr-w-full" tone="success" has-icon>
      <span>Auto</span>
      <Icon icon="ph:caret-down" />
    </spr-button>
  </spr-dropdown>

  <!-- Top placement -->
  <spr-dropdown id="dropdown-top" v-model="selectedValue" :menu-list="menuList" placement="top" popper-width="200px">
    <spr-button class="spr-w-full" tone="success" has-icon>
      <span>Top</span>
      <Icon icon="ph:caret-down" />
    </spr-button>
  </spr-dropdown>
</template>

ความกว้างและความกว้างของป็อปเปอร์

คอมโพเนนต์ดรอปดาวน์ให้สองวิธีในการควบคุมขนาด:

width: ควบคุมความกว้างโดยรวมของ wrapper ดรอปดาวน์ (รวมองค์ประกอบทริกเกอร์)
popper-width: ควบคุมความกว้างของเมนูดรอปดาวน์ที่ปรากฏเมื่อคลิก

vue

<template>
  <spr-dropdown
    id="sample-dropdownWidth"
    v-model="dropdownWidth"
    :menu-list="menuList"
    width="50%"
    popper-width="500px"
  >
    <spr-button class="spr-w-full" tone="success" has-icon>
      <span>Button</span>
      <Icon icon="ph:caret-down" />
    </spr-button>
  </spr-dropdown>
</template>

กลยุทธ์ป็อปเปอร์

เมื่อใช้ดรอปดาวน์ภายในองค์ประกอบที่มีตำแหน่งเช่นโมดอลหรือแผงคงที่ คุณอาจต้องเปลี่ยนกลยุทธ์การจัดตำแหน่ง พร็อพส์ popper-strategy ควบคุมวิธีการจัดตำแหน่งเมนูดรอปดาวน์:

absolute (ค่าเริ่มต้น): จัดตำแหน่งดรอปดาวน์สัมพันธ์กับบรรพบุรุษที่มีตำแหน่งที่ใกล้ที่สุด
fixed: จัดตำแหน่งดรอปดาวน์สัมพันธ์กับวิวพอร์ต โดยไม่สนใจการจัดตำแหน่งองค์ประกอบพาเรนต์

vue

<template>
  <spr-button tone="success" @click="modalModel = true">Open Modal</spr-button>

  <spr-modal v-model="modalModel" title="Dropdown with Modal">
    <spr-dropdown
      id="sample-dropdownStrategy"
      v-model="dropdownStrategy"
      :menu-list="menuList"
      wrapper-position="initial"
      popper-strategy="fixed"
      width="100px"
    >
      <spr-button class="spr-w-full" tone="success" has-icon>
        <span>Button</span>
        <Icon icon="ph:caret-down" />
      </spr-button>
    </spr-dropdown>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
  </spr-modal>
</template>

<script setup>
import { ref } from 'vue';

const modalModel = ref(false);
const dropdownStrategy = ref('');
</script>

หมายเหตุสำคัญ

เมื่อใช้กลยุทธ์ป็อปเปอร์ fixed คุณควรตั้งค่า wrapper-position="initial" ด้วยเพื่อแทนที่การจัดตำแหน่ง relative เริ่มต้น สิ่งนี้ป้องกันความขัดแย้งในการจัดตำแหน่งภายในเลย์เอาต์ที่ซับซ้อนเช่นโมดอล

เนื้อหาป็อปเปอร์ปรับแต่ง

คุณสามารถปรับแต่งเนื้อหาของเมนูดรอปดาวน์โดยใช้สล็อต popper สิ่งนี้ช่วยให้คุณรวม HTML หรือคอมโพเนนต์ปรับแต่งใดๆ ภายในดรอปดาวน์

vue

<template>
  <spr-dropdown
    id="sample-dropdownCustomPopper"
    width="150px"
    :triggers="['hover', 'click']"
    :popper-triggers="['hover', 'click']"
    popper-width="500px"
  >
    <spr-button class="spr-w-full" tone="success" has-icon>
      <span>Custom Popper</span>
      <Icon icon="ph:caret-down" />
    </spr-button>

    <template #popper>
      <h5 class="spr-text-center">This is a custom popper!</h5>
    </template>
  </spr-dropdown>
</template>

API Reference

Props

ชื่อ	คำอธิบาย	ประเภท	ค่าเริ่มต้น
`id`	จำเป็น. ตัวระบุเฉพาะสำหรับดรอปดาวน์ ใช้เพื่อผูกป็อปเปอร์กับองค์ประกอบที่ถูกต้อง	string	-
`model-value`	ค่าที่เลือกในดรอปดาวน์ ผูกด้วย `v-model`	string \| number \| object \| Array	[]
`menu-list`	รายการตัวเลือกที่จะแสดงในเมนูดรอปดาวน์ สามารถจัดรูปแบบเป็น: - อาร์เรย์ของออบเจ็กต์ที่มีพร็อพส์ `text` และ `value` - อาร์เรย์ของสตริง - อาร์เรย์ของออบเจ็กต์ปรับแต่ง (ใช้กับ `textField` และ `valueField`)	array	[]
`text-field`	เมื่อใช้ออบเจ็กต์ปรับแต่งใน `menuList` ระบุพร็อพส์ที่จะใช้สำหรับข้อความแสดง	string	'text'
`value-field`	เมื่อใช้ออบเจ็กต์ปรับแต่งใน `menuList` ระบุพร็อพส์ที่จะใช้สำหรับค่า	string	'value'
`search-string`	คำค้นหาที่จะกรองตัวเลือกดรอปดาวน์	string	''
`multiSelect`	เมื่อเป็นจริง อนุญาตให้เลือกตัวเลือกหลายตัวจากดรอปดาวน์	boolean	false
`group-items-by`	จัดกลุ่มรายการดรอปดาวน์ตามตัวอักษร	'A-Z' \| 'Z-A'	-
`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'	'bottom'
`wrapper-position`	ค่าตำแหน่ง CSS สำหรับ wrapper ดรอปดาวน์	string	'relative'
`width`	ความกว้างของ wrapper ดรอปดาวน์ (รวมองค์ประกอบทริกเกอร์)	string	'100%'
`popper-width`	ความกว้างของเมนูดรอปดาวน์ที่ปรากฏเมื่อถูกทริกเกอร์	string	'100%'
`popper-inner-width`	ความกว้างของพื้นที่เนื้อหาภายในของเมนูดรอปดาวน์	string	'unset'
`popper-strategy`	กลยุทธ์การจัดตำแหน่งสำหรับเมนูดรอปดาวน์ โดยเฉพาะสำคัญในโมดอล	'absolute' \| 'fixed'	'absolute'
`disabled`	เมื่อเป็นจริง ปิดใช้งานดรอปดาวน์จากการเปิด	boolean	false
`ladderized`	เมื่อเป็นจริง เปิดใช้งานตัวเลือกดรอปดาวน์แบบลำดับชั้น (เมนูซ้อน)	boolean	false
`remove-current-level-in-back-label`	สำหรับดรอปดาวน์แบบลำดับชั้น ควบคุมพฤติกรรมป้ายย้อนกลับ	boolean	false
`no-check-in-list`	เมื่อเป็นจริง ซ่อนไอคอนเครื่องหมายถูกในรายการดรอปดาวน์	boolean	false
`lozenge`	เมื่อเป็นจริง เปิดใช้งานการแสดงรายการโลเซนจ์	boolean	false
`triggers`	อาร์เรย์ของอีเวนต์ที่จะทริกเกอร์ดรอปดาวน์ให้เปิด	'click' \| 'hover' \| 'focus' \| 'touch'[]	['click']
`popper-triggers`	อาร์เรย์ของอีเวนต์ที่จะทริกเกอร์เมนูดรอปดาวน์ (องค์ประกอบป็อปเปอร์) ให้เปิด	'click' \| 'hover' \| 'focus' \| 'touch'[]	[]
`auto-hide`	เมื่อเป็นจริง ซ่อนดรอปดาวน์โดยอัตโนมัติเมื่อคลิกภายนอก	boolean	true

Events

ชื่อ	คำอธิบาย	พารามิเตอร์
update:modelValue	ปล่อยเมื่อค่าที่เลือกเปลี่ยน	ค่าที่เลือกใหม่
@infinite-scroll-trigger	ปล่อยเมื่อผู้ใช้เลื่อนไปที่ด้านล่างของรายการดรอปดาวน์ มีประโยชน์สำหรับการใช้งานการโหลดแบบ lazy	Boolean
@popper-state	อีเวนต์ที่ปล่อยเมื่อคุณเปิดหรือปิดป็อปเปอร์	Bolean

Slots

ชื่อ	คำอธิบาย
default	องค์ประกอบทริกเกอร์ที่เปิดดรอปดาวน์เมื่อคลิก (โดยปกติเป็นปุ่ม ชิปส์ หรือโลเซนจ์)
popper	องค์ประกอบปรับแต่งสำหรับเนื้อหาป็อปเปอร์

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

ผลิตภัณฑ์ Sprout เหล่านี้ใช้คอมโพเนนต์ดรอปดาวน์:

ปุ่ม

ปฏิทิน

แผงด้านข้าง

ตาราง

เครื่องมือเลือกวันที่

ช่องป้อนข้อมูล

เรดิโอ

เลือก

ดรอปดาวน์

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

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

ความกว้างและความกว้างของป็อปเปอร์

กลยุทธ์ป็อปเปอร์

เนื้อหาป็อปเปอร์ปรับแต่ง

API Reference

Props

Events

Slots

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

ดรอปดาวน์ ​

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

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

ความกว้างและความกว้างของป็อปเปอร์ ​

กลยุทธ์ป็อปเปอร์ ​

เนื้อหาป็อปเปอร์ปรับแต่ง ​

API Reference ​

Props ​

Events ​

Slots ​

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

ดรอปดาวน์

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

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

ความกว้างและความกว้างของป็อปเปอร์

กลยุทธ์ป็อปเปอร์

เนื้อหาป็อปเปอร์ปรับแต่ง

API Reference

Props

Events

Slots

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