รายการ

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

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

การใช้งานพื้นฐานที่สุดเกี่ยวข้องกับการผูกการเลือกของคุณกับ v-model และให้รายการไอเท็มผ่านพร็อพส์ menu-list แต่ละไอเท็มต้องมีอย่างน้อยพร็อพส์ text (ป้ายแสดง) และ value (ตัวระบุเฉพาะ)

No results found

vue

<template>
  <div
    :class="[
      'spr-max-h-[300px] spr-overflow-auto spr-rounded-md spr-p-2',
      'spr-border-color-weak spr-border spr-border-solid',
    ]"
  >
    <spr-list v-model="selectedItems" :menu-list="menuList" />
  </div>
</template>

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

const selectedItems = ref([]);

const menuList = ref([
  { text: 'Apple', value: 'apple' },
  { text: 'Banana', value: 'banana' },
  { text: 'Cherry', value: 'cherry' },
  { text: 'Date', value: 'date' },
  { text: 'Elderberry', value: 'elderberry' },
  { text: 'Fig', value: 'fig' },
  { text: 'Grape', value: 'grape' },
  { text: 'Honeydew', value: 'honeydew' },
  { text: 'Kiwi', value: 'kiwi' },
  { text: 'Mango', value: 'mango' },
]);
</script>

การเลือกหลายรายการ

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

No results found

vue

<template>
  <div
    :class="[
      'spr-max-h-[300px] spr-overflow-auto spr-rounded-md spr-p-2',
      'spr-border-color-weak spr-border spr-border-solid',
    ]"
  >
    <spr-list v-model="selectedItems" :menu-list="menuList" multi-select />
  </div>
</template>

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

const selectedItems = ref([]);

const menuList = ref([
  { text: 'Apple', value: 'apple' },
  { text: 'Banana', value: 'banana' },
  { text: 'Cherry', value: 'cherry' },
  { text: 'Date', value: 'date' },
  { text: 'Elderberry', value: 'elderberry' },
]);
</script>

เลือกทั้งหมด / ยกเลิกการเลือกทั้งหมด

เมื่อใช้โหมดการเลือกหลายรายการ ปุ่ม "เลือกทั้งหมด" / "ยกเลิกการเลือกทั้งหมด" จะถูกจัดเตรียมโดยอัตโนมัติ ปุ่มนี้ช่วยให้ผู้ใช้สามารถเลือกหรือยกเลิกการเลือกรายการที่มีอยู่ทั้งหมดในรายการได้อย่างรวดเร็ว

คุณสมบัติ:

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

0 Selected

No results found

vue

<template>
  <div
    :class="[
      'spr-max-h-[300px] spr-overflow-auto spr-rounded-md spr-p-2',
      'spr-border-color-weak spr-border spr-border-solid',
    ]"
  >
    <spr-list v-model=\"selectedItems\" :menu-list=\"menuList\" multi-select allow-select-all display-list-item-selected />
  </div>
</template>

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

const selectedItems = ref([]);

const menuList = ref([
  { text: 'Apple', value: 'apple' },
  { text: 'Banana', value: 'banana' },
  { text: 'Cherry', value: 'cherry' },
  { text: 'Date', value: 'date' },
  { text: 'Elderberry', value: 'elderberry' },
  { text: 'Fig', value: 'fig' },
  { text: 'Grape', value: 'grape' },
  { text: 'Honeydew', value: 'honeydew' },
]);
</script>

ปุ่มเลือกทั้งหมดจะปรากฏขึ้นเมื่อ:

พร็อพส์ multi-select ถูกเปิดใช้งาน
หรือ พร็อพส์ display-list-item-selected ถูกเปิดใช้งาน
หรือ พร็อพส์ searchable-menu ถูกเปิดใช้งาน

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

การจัดกลุ่มไอเท็ม

จัดกลุ่มไอเท็มโดยใช้พร็อพส์ group-items-by ด้วยค่า 'default', 'A-Z', หรือ 'Z-A':

default: จัดกลุ่มตามพร็อพส์ group ของไอเท็ม
A-Z: เรียงตามตัวอักษรในลำดับจากน้อยไปมาก
Z-A: เรียงตามตัวอักษรในลำดับจากมากไปน้อย

จัดกลุ่มตามค่าเริ่มต้น

No results found

Grouped by A-Z

No results found

vue

<template>
  <spr-list v-model="selectedItems" :menu-list="menuList" group-items-by="default" />
</template>

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

const selectedItems = ref([]);

const menuList = ref([
  { text: 'Apple', value: 'apple', group: 'Fruits' },
  { text: 'Banana', value: 'banana', group: 'Fruits' },
  { text: 'Carrot', value: 'carrot', group: 'Vegetables' },
  { text: 'Date', value: 'date', group: 'Fruits' },
  { text: 'Eggplant', value: 'eggplant', group: 'Vegetables' },
]);
</script>

รายการที่ค้นหาได้

เพิ่มฟังก์ชันการค้นหาด้วยพร็อพส์ searchable-menu ผู้ใช้สามารถกรองไอเท็มโดยพิมพ์ในช่องค้นหา

No results found

vue

<template>
  <spr-list
    v-model="selectedItems"
    :menu-list="menuList"
    searchable-menu
    searchable-menu-placeholder="Search items..."
  />
</template>

รายการปุ่มวิทยุ

แสดงตัวเลือกปุ่มวิทยุสำหรับรายการการเลือกเดี่ยวโดยใช้พร็อพส์ radio-list ปุ่มวิทยุปรากฏขึ้นก่อนข้อความไอเท็มและไอคอน ซึ่งให้การระบุภาพที่ชัดเจนสำหรับโหมดการเลือกเดี่ยว

No results found

vue

<template>
  <spr-list v-model="selectedItems" :menu-list="menuList" radio-list />
</template>

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

const selectedItems = ref([]);

const menuList = ref([
  { text: 'Option 1', value: 'option1' },
  { text: 'Option 2', value: 'option2' },
  { text: 'Option 3', value: 'option3' },
  { text: 'Option 4', value: 'option4' },
  { text: 'Option 5', value: 'option5' },
]);
</script>

ข้อความรอง

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

No results found

vue

<template>
  <spr-list v-model="selectedItems" :menu-list="itemsWithSubtext" />
</template>

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

const selectedItems = ref([]);

const itemsWithSubtext = ref([
  {
    text: 'Home',
    value: 'home',
    subtext: 'Go to home page',
  },
  {
    text: 'Settings',
    value: 'settings',
    subtext: 'Configure preferences',
  },
  {
    text: 'Users',
    value: 'users',
    subtext: 'Manage user accounts',
  },
]);
</script>

ไอคอน

ไอคอนรายการเริ่มต้น

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

vue

<template>
  <spr-list v-model="selectedItems" :menu-list="menuList" item-icon="ph:check" />
</template>

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

const selectedItems = ref([]);

const menuList = ref([
  { text: 'Apple', value: 'apple' },
  { text: 'Banana', value: 'banana' },
  { text: 'Cherry', value: 'cherry' },
]);
</script>

ไอคอนรายการ

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

No results found

vue

<template>
  <spr-list v-model="selectedItems" :menu-list="itemsWithIcons" />
</template>

โทนและเติมไอคอน

ปรับแต่งลักษณะของไอคอนรายการเริ่มต้นโดยใช้พร็อพส์ item-icon-tone และ item-icon-fill สิ่งเหล่านี้ช่วยให้คุณสามารถใช้โทนสีและรูปแบบการเติมที่คล้ายกับส่วนประกอบ lozenge

โทนที่พร้อมใช้งาน: 'plain', 'pending', 'information', 'success', 'danger', 'neutral', 'caution'

No results found

vue

<template>
  <spr-list
    v-model="selectedItems"
    :menu-list="menuList"
    item-icon="ph:star"
    item-icon-tone="success"
    :item-icon-fill="true"
  />
</template>

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

const selectedItems = ref([]);

const menuList = ref([
  { text: 'ตัวเลือก 1', value: 'option1' },
  { text: 'ตัวเลือก 2', value: 'option2' },
  { text: 'ตัวเลือก 3', value: 'option3' },
]);
</script>

รายการแบบบันได (ลำดับชั้น)

สร้างรายการซ้อนลำดับชั้นโดยใช้พร็อพส์ ladderized และรวมพร็อพส์ sublevel ในไอเท็ม

No results found

vue

<template>
  <spr-ladderized-list v-model="selectedItems" :menu-list="hierarchicalData" />
</template>

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

const selectedItems = ref([]);

const hierarchicalData = ref([
  {
    text: 'Fruits',
    value: 'fruits',
    sublevel: [
      { text: 'Apple', value: 'apple' },
      { text: 'Banana', value: 'banana' },
      { text: 'Cherry', value: 'cherry' },
    ],
  },
  {
    text: 'Vegetables',
    value: 'vegetables',
    sublevel: [
      { text: 'Carrot', value: 'carrot' },
      { text: 'Broccoli', value: 'broccoli' },
    ],
  },
]);
</script>

การแสดงแบบ Lozenge

คอมโพเนนต์รายการรองรับโหมดการแสดง lozenge สองแบบ:

1. โหมด Lozenge เต็ม (ไอเท็มเป็น Lozenge)

แสดงไอเท็มรายการทั้งหมดเป็น lozenge โดยเปิดใช้งานพร็อพส์ lozenge และให้ lozengeProps สำหรับแต่ละไอเท็ม ไอเท็มจะกลายเป็น lozenge เอง

No results found

vue

<template>
  <spr-list v-model="selectedItems" :menu-list="lozengeItems" lozenge />
</template>

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

const selectedItems = ref([]);

const lozengeItems = ref([
  {
    text: 'Active',
    value: 'active',
    lozengeProps: {
      label: 'Active',
      tone: 'success',
      fill: true,
      icon: 'ph:check-circle',
    },
  },
  {
    text: 'Pending',
    value: 'pending',
    lozengeProps: {
      label: 'Pending',
      tone: 'neutral',
      fill: false,
      icon: 'ph:clock',
    },
  },
  {
    text: 'Disabled',
    value: 'disabled',
    lozengeProps: {
      label: 'Disabled',
      tone: 'negative',
      fill: true,
      icon: 'ph:x-circle',
    },
  },
]);
</script>

2. ป้าย Lozenge (ไอเท็มที่มี Lozenge ด้านขวา)

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

No results found

vue

<template>
  <spr-list v-model="selectedItems" :menu-list="menuItems" />
</template>

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

const selectedItems = ref([]);

const menuItems = ref([
  {
    text: 'Task 1',
    value: 'task1',
    subtext: 'Due tomorrow',
    lozenge: {
      label: 'Pending',
      tone: 'neutral',
      fill: false,
    },
  },
  {
    text: 'Task 2',
    value: 'task2',
    subtext: 'Completed',
    lozenge: {
      label: 'Done',
      tone: 'success',
      fill: true,
    },
  },
  {
    text: 'Task 3',
    value: 'task3',
    subtext: 'In progress',
    lozenge: {
      label: 'Active',
      tone: 'success',
      fill: true,
    },
  },
]);
</script>

ไอเท็มที่เลือกไว้ล่วงหน้า

ใช้ pre-selected-items เพื่อตั้งการเลือกเริ่มต้นตามค่าของไอเท็ม

vue

<template>
  <spr-list v-model="selectedItems" :menu-list="menuList" :pre-selected-items="['apple', 'banana']" />
</template>

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

const selectedItems = ref([]);

const menuList = ref([
  { text: 'Apple', value: 'apple' },
  { text: 'Banana', value: 'banana' },
  { text: 'Cherry', value: 'cherry' },
]);
</script>

การจัดการอีเวนต์

ใช้ @update:model-value เพื่อตอบสนองต่อการเปลี่ยนแปลงการเลือกและดึงข้อมูลออบเจ็กต์ไอเท็มที่เลือกทั้งหมด

No results found

Selected: None selected

vue

<template>
  <spr-list v-model="selectedItems" :menu-list="menuList" @update:model-value="handleSelection" />
  <div v-if="selectedItem" class="spr-mt-4 spr-bg-blue-50 spr-p-4">
    <p>Selected Item: {{ selectedItem.text }}</p>
  </div>
</template>

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

const selectedItems = ref([]);
const selectedItem = ref(null);

const menuList = ref([
  { text: 'Apple', value: 'apple' },
  { text: 'Banana', value: 'banana' },
  { text: 'Cherry', value: 'cherry' },
]);

const handleSelection = (items) => {
  selectedItem.value = items[0] || null;
};
</script>

การอ้างอิง API

พร็อพส์

พร็อพส์	คำอธิบาย	ประเภท	ค่าเริ่มต้น
`model-value` (v-model)	การผูกสองทางสำหรับไอเท็มที่เลือกซึ่งประกอบด้วยออบเจ็กต์ไอเท็มทั้งหมด	`MenuListType[]`	`[]`
`menu-list`	อาร์เรย์ของไอเท็มที่จะแสดง	`MenuListType[]`	`[]` (จำเป็น)
`group-items-by`	กลยุทธ์การจัดกลุ่ม: `'default'` (ตามพร็อพส์กลุ่ม), `'A-Z'` (จากน้อยไปมาก), หรือ `'Z-A'` (จากมากไปน้อย)	`'default' \| 'A-Z' \| 'Z-A'`	`undefined`
`multi-select`	เปิดใช้งานโหมดการเลือกหลายรายการด้วยช่องทำเครื่องหมาย	`boolean`	`false`
`pre-selected-items`	เลือกไอเท็มล่วงหน้าตามค่าของพวกเขา	`(string \| number \| Record<string, unknown>)[]`	`[]`
`searchable-menu`	แสดงอินพุตการค้นหาสำหรับกรองไอเท็ม	`boolean`	`false`
`searchable-menu-placeholder`	ข้อความตัวยึดตำแหน่งสำหรับอินพุตการค้นหา	`string`	`'Search...'`
`search-value`	ค่าการค้นหาภายนอก (การผูกสองทาง)	`string`	`''`
`menu-level`	ระดับการซ้อนสำหรับรายการลำดับชั้น	`number`	`0`
`ladderized`	เปิดใช้งานการแสดงรายการลำดับชั้น/แบบบันได	`boolean`	`false`
`disabled-local-search`	ปิดใช้งานการกรองการค้นหาในเครื่อง	`boolean`	`false`
`loading`	แสดงโครงกระดูกการโหลดแทนไอเท็ม	`boolean`	`false`
`no-check`	ซ่อนไอคอนเครื่องหมายถูกในโหมดการเลือกเดี่ยว	`boolean`	`false`
`lozenge`	แสดงไอเท็มเป็น lozenge	`boolean`	`false`
`supporting-display-text`	แสดงข้อความแบบกำหนดเอง (เช่น "2 Selected")	`string`	`''`
`display-list-item-selected`	แสดงจำนวนไอเท็มที่เลือกเมื่อค้นหาได้	`boolean`	`false`
`sticky-search-offset`	ออฟเซ็ตสำหรับส่วนหัวการค้นหาที่ติด	`string \| number`	`0`
`item-icon`	ไอคอนเริ่มต้นสำหรับไอเท็มทั้งหมด	`string`	`''`
`item-icon-tone`	โทน/สีสำหรับไอคอนไอเท็ม: `'plain'`, `'pending'`, `'information'`, `'success'`, `'danger'`, `'neutral'`, หรือ `'caution'`	`string`	`'plain'`
`item-icon-fill`	รูปแบบการเติมสำหรับไอคอนไอเท็ม (พื้นหลังที่เป็นของแข็ง)	`boolean`	`false`
`disabled-unselected-items`	ปิดใช้งานและทำให้ไอเท็มที่ไม่ได้เลือกเป็นสีเทา	`boolean`	`false`
`radio-list`	แสดงปุ่มวิทยุสำหรับโหมดการเลือกเดี่ยว (ต้องใช้การเลือกเดี่ยว ไม่เข้ากันได้กับการเลือกหลายรายการ)	`boolean`	`false`

อีเวนต์

อีเวนต์	คำอธิบาย	เพย์โหลด
`update:modelValue`	ปล่อยเมื่อการเลือกเปลี่ยนแปลง	`MenuListType[]` - อาร์เรย์ของออบเจ็กต์ไอเท็มที่เลือก
`update:searchValue`	ปล่อยเมื่ออินพุตการค้นหาเปลี่ยนแปลง	`string` - ข้อความค้นหาใหม่
`@get-single-selected-item`	ปล่อยเมื่อไอเท็มถูกเลือกในโหมดการเลือกเดี่ยว	`MenuListType` - ออบเจ็กต์ไอเท็มที่เลือก

ปุ่ม

ปฏิทิน

แผงด้านข้าง

ตาราง

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

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

เรดิโอ

เลือก

รายการ

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

การเลือกหลายรายการ

เลือกทั้งหมด / ยกเลิกการเลือกทั้งหมด

คุณสมบัติ:

การจัดกลุ่มไอเท็ม

จัดกลุ่มตามค่าเริ่มต้น

Grouped by A-Z

รายการที่ค้นหาได้

รายการปุ่มวิทยุ

ข้อความรอง

ไอคอน

ไอคอนรายการเริ่มต้น

ไอคอนรายการ

โทนและเติมไอคอน

รายการแบบบันได (ลำดับชั้น)

การแสดงแบบ Lozenge

1. โหมด Lozenge เต็ม (ไอเท็มเป็น Lozenge)

2. ป้าย Lozenge (ไอเท็มที่มี Lozenge ด้านขวา)

ไอเท็มที่เลือกไว้ล่วงหน้า

การจัดการอีเวนต์

การอ้างอิง API

พร็อพส์

อีเวนต์

รายการ ​

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

การเลือกหลายรายการ ​

เลือกทั้งหมด / ยกเลิกการเลือกทั้งหมด ​

คุณสมบัติ: ​

การจัดกลุ่มไอเท็ม ​

จัดกลุ่มตามค่าเริ่มต้น

Grouped by A-Z

รายการที่ค้นหาได้ ​

รายการปุ่มวิทยุ ​

ข้อความรอง ​

ไอคอน ​

ไอคอนรายการเริ่มต้น ​

ไอคอนรายการ ​

โทนและเติมไอคอน ​

รายการแบบบันได (ลำดับชั้น) ​

การแสดงแบบ Lozenge ​

1. โหมด Lozenge เต็ม (ไอเท็มเป็น Lozenge) ​

2. ป้าย Lozenge (ไอเท็มที่มี Lozenge ด้านขวา) ​

ไอเท็มที่เลือกไว้ล่วงหน้า ​

การจัดการอีเวนต์ ​

การอ้างอิง API ​

พร็อพส์ ​

อีเวนต์ ​

รายการ

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

การเลือกหลายรายการ

เลือกทั้งหมด / ยกเลิกการเลือกทั้งหมด

คุณสมบัติ:

การจัดกลุ่มไอเท็ม

รายการที่ค้นหาได้

รายการปุ่มวิทยุ

ข้อความรอง

ไอคอน

ไอคอนรายการเริ่มต้น

ไอคอนรายการ

โทนและเติมไอคอน

รายการแบบบันได (ลำดับชั้น)

การแสดงแบบ Lozenge

1. โหมด Lozenge เต็ม (ไอเท็มเป็น Lozenge)

2. ป้าย Lozenge (ไอเท็มที่มี Lozenge ด้านขวา)

ไอเท็มที่เลือกไว้ล่วงหน้า

การจัดการอีเวนต์

การอ้างอิง API

พร็อพส์

อีเวนต์