ปุ่มดรอปดาวน์

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

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

vue

<template>
  <div class="spr-flex spr-items-center spr-gap-2">
    <spr-button-dropdown
      dropdown-id="example1"
      v-model="selected"
      :menu-list="menuList"
      width="160px"
      popper-width="160px"
      @click="mainButtonClicked"
    >
      ปุ่มดรอปดาวน์
    </spr-button-dropdown>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const selected = ref([]);
const menuList = ref([
  {
    text: 'เพิ่ม',
    value: 'add',
    icon: 'ph:check',
    iconColor: 'spr-text-color-supporting',
    onClickFn: () => {
      alert('เพิ่มถูกคลิก');
    },
  },
  {
    text: 'ลบ',
    value: 'delete',
    icon: 'ph:trash',
    textColor: 'spr-text-color-danger-base',
    onClickFn: () => {
      alert('ลบถูกคลิก');
    },
  },
]);

const mainButtonClicked = () => {
  alert('ปุ่มหลักถูกคลิก');
};
</script>

โทน

vue

<spr-button-dropdown dropdown-id="example2" v-model="selectedNeutral" :menu-list="menuList" tone="neutral">
  เป็นกลาง
</spr-button-dropdown>
<spr-button-dropdown dropdown-id="example3" v-model="selectedSuccess" :menu-list="menuList" tone="success">
  สำเร็จ
</spr-button-dropdown>

ขนาด

vue

<spr-button-dropdown v-model="selectedSmall" dropdown-id="example4" :menu-list="menuList" size="small">
  เล็ก
</spr-button-dropdown>
<spr-button-dropdown v-model="selectedMedium" dropdown-id="example5" :menu-list="menuList">
  กลาง
</spr-button-dropdown>
<spr-button-dropdown v-model="selectedLarge" dropdown-id="example6" :menu-list="menuList" size="large">
  ใหญ่
</spr-button-dropdown>

ตัวแปร

vue

<spr-button-dropdown v-model="selectedPrimary" dropdown-id="example7" :menu-list="menuList" variant="primary">
  หลัก
</spr-button-dropdown>
<spr-button-dropdown v-model="selectedSecondary" dropdown-id="example8" :menu-list="menuList" variant="secondary">
  รอง
</spr-button-dropdown>

ปิดใช้งาน

vue

<spr-button-dropdown v-model="selectedDisabled" dropdown-id="example9" :menu-list="menuList" disabled>
  ปิดใช้งาน
</spr-button-dropdown>
<spr-button-dropdown
  v-model="selectedDisabled"
  dropdown-id="example9"
  :menu-list="menuList"
  variant="secondary"
  disabled
>
  ปิดใช้งาน
</spr-button-dropdown>

API Reference

Props

ชื่อ	คำอธิบาย	ประเภท	ค่าเริ่มต้น
modelValue	รายการเมนูที่เลือกอยู่ในปัจจุบัน ใช้กับ `v-model` สำหรับการผูกสองทางเพื่อติดตามการเลือกในเมนูดรอปดาวน์	MenuListType[] \| string[] \| Record<string, unknown>[]	[]
menuList	อาร์เรย์ของตัวเลือกที่จะแสดงในเมนูดรอปดาวน์ แต่ละรายการสามารถรวม: `text`: ข้อความแสดงสำหรับรายการเมนู `value`: ตัวระบุเฉพาะสำหรับรายการเมนู `icon`: ชื่อไอคอน Iconify ไม่บังคับ `iconColor`: คลาส CSS ไม่บังคับสำหรับสีไอคอน `textColor`: คลาส CSS ไม่บังคับสำหรับสีข้อความ `onClickFn`: ฟังก์ชันเรียกกลับไม่บังคับเมื่อรายการถูกคลิก `disabled`: บูลีนไม่บังคับเพื่อปิดใช้งานรายการเมนูเฉพาะ	MenuListType[] \| string[] \| Record<string, unknown>[]	[]
dropdownId	ตัวระบุเฉพาะที่จำเป็นสำหรับคอมโพเนนต์ดรอปดาวน์ ใช้สำหรับการเข้าถึงและการจัดการสถานะ	string	จำเป็น
tone	ควบคุมธีมสีของปุ่มดรอปดาวน์ ตัวเลือก: `neutral`: ลักษณะมาตรฐาน `success`: ลักษณะสีเขียวสำหรับการดำเนินการเชิงบวก หมายเหตุ: ไม่เหมือนกับคอมโพเนนต์ปุ่มมาตรฐาน โทนอันตรายไม่พร้อมใช้งานสำหรับปุ่มดรอปดาวน์	'neutral' \| 'success'	'neutral'
variant	ควบคุมสไตล์ภาพของปุ่มดรอปดาวน์ ตัวเลือก: `primary`: พื้นหลังทึบพร้อมการเน้นที่แข็งแกร่งกว่า `secondary`: สไตล์โครงร่างพร้อมการเน้นปานกลาง หมายเหตุ: ไม่เหมือนกับคอมโพเนนต์ปุ่มมาตรฐาน ตัวแปรระดับสามไม่พร้อมใช้งาน	'primary' \| 'secondary'	'primary'
size	ควบคุมขนาดของปุ่มดรอปดาวน์ ส่งผลต่อการเว้นระยะ ขนาดตัวอักษร และมิติโดยรวม	'small' \| 'medium' \| 'large'	'medium'
disabled	เมื่อตั้งค่าเป็น `true` ปุ่มหลักและทริกเกอร์ดรอปดาวน์ทั้งสองจะไม่โต้ตอบและปรากฏปิดใช้งานภาพ	boolean	false
width	ตั้งค่าความกว้างของคอมโพเนนต์ปุ่มดรอปดาวน์ทั้งหมด สามารถเป็นค่าความกว้าง CSS ที่ถูกต้องใดๆ	string	'fit-content'
popperWidth	ตั้งค่าความกว้างของคอนเทนเนอร์เมนูดรอปดาวน์ สามารถเป็นค่าความกว้าง CSS ที่ถูกต้องใดๆ	string	'fit-content'
popperInnerWidth	ตั้งค่าความกว้างของเนื้อหาภายในเมนูดรอปดาวน์ มีประโยชน์สำหรับการปรับแต่งเลย์เอาต์อย่างละเอียด	string	'unset'
placement	ควบคุมตำแหน่งของเมนูดรอปดาวน์สัมพันธ์กับปุ่ม ค่าทั่วไป: `bottom`: เปิดด้านล่างปุ่ม (ค่าเริ่มต้น) `top`: เปิดด้านบนปุ่ม `left`: เปิดทางด้านซ้ายของปุ่ม `right`: เปิดทางด้านขวาของปุ่ม ตัวแปรที่มี `-start` หรือ `-end` จัดตำแหน่งเมนูไปยังจุดเริ่มต้นหรือจุดสิ้นสุดของปุ่ม	'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'

Events

เหตุการณ์	เพย์โหลด	คำอธิบาย
click	MouseEvent	ถูกปล่อยออกมาหากปุ่มหลัก (ซ้าย) ถูกคลิก เหตุการณ์นี้ช่วยให้คุณเรียกใช้การดำเนินการหลักเมื่อปุ่มหลักถูกคลิก แยกจากฟังก์ชันดรอปดาวน์
update:modelValue	MenuListType[] \| string[] \| Record<string, unknown>[]	ถูกปล่อยออกมาหากมีการเลือกในเมนูดรอปดาวน์ ใช้สำหรับการผูก v-model เพื่ออัปเดตค่าที่เลือก เพย์โหลดประกอบด้วยข้อมูลการเลือกที่สมบูรณ์

Slots

ชื่อ	คำอธิบาย
default	เนื้อหาสำหรับปุ่มหลัก (ซ้าย) สามารถรวมข้อความ ไอคอน หรือองค์ประกอบอื่นๆ ปุ่มดรอปดาวน์ (ขวา) แสดงไอคอน caret-down เสมอและไม่สามารถปรับแต่งผ่านสล็อต

ชื่อ

คำอธิบาย

default

เนื้อหาสำหรับปุ่มหลัก (ซ้าย) สามารถรวมข้อความ ไอคอน หรือองค์ประกอบอื่นๆ

ปุ่มดรอปดาวน์ (ขวา) แสดงไอคอน caret-down เสมอและไม่สามารถปรับแต่งผ่านสล็อต

โครงสร้างคอมโพเนนต์

ปุ่มดรอปดาวน์ประกอบด้วยส่วนหลักสามส่วน:

ปุ่มหลัก: ปุ่มขนาดใหญ่ทางด้านซ้ายที่เรียกใช้การดำเนินการหลักผ่านเหตุการณ์ click
ทริกเกอร์ดรอปดาวน์: ปุ่มขนาดเล็กทางด้านขวาที่มีไอคอน caret ที่เปิดเมนูดรอปดาวน์
เมนูดรอปดาวน์: เมนูที่ปรากฏขึ้นเมื่อทริกเกอร์ดรอปดาวน์ถูกคลิก ประกอบด้วยตัวเลือกที่ระบุใน menuList

อินเทอร์เฟซ MenuListType

typescript

// โครงสร้างหลักของออบเจกต์ที่สามารถใช้ใน prop menuList
type MenuListType = {
  text: string; // ข้อความแสดงสำหรับรายการเมนู
  value: string | number; // ตัวระบุเฉพาะสำหรับรายการ
  icon?: string; // ชื่อไอคอน Iconify ไม่บังคับ
  iconColor?: string; // คลาส CSS สำหรับสีไอคอน
  textColor?: string; // คลาส CSS สำหรับสีข้อความ
  onClickFn?: () => void; // ฟังก์ชันที่จะเรียกเมื่อรายการถูกคลิก
  disabled?: boolean; // รายการถูกปิดใช้งานหรือไม่
  // คุณสมบัติเพิ่มเติมไม่บังคับ
  subtext?: string; // บรรทัดข้อความรอง
  subvalue?: string; // ค่ารอง
  sublevel?: MenuListType[]; // รายการเมนูที่ซ้อนกัน (สำหรับเมนูแบบลำดับชั้น)
  group?: string; // ตัวระบุการจัดกลุ่ม
};

ปุ่ม

ปฏิทิน

แผงด้านข้าง

ตาราง

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

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

เรดิโอ

เลือก

ปุ่มดรอปดาวน์ ​

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

โทน ​

ขนาด ​

ตัวแปร ​

ปิดใช้งาน ​

API Reference ​

Props ​

Events ​

Slots ​

โครงสร้างคอมโพเนนต์ ​

อินเทอร์เฟซ MenuListType ​