แอกคอร์เดียน

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

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

แอกคอร์เดียนไอเท็ม 1โลเร็มอิปซัมดอเลอร์ซิทอาเมท, คอนเซคเทเทอร์อดิปิซซิงเอลิท. เซดโดอิวส์มอดเทมพอร์อินซิดิดันท์อัทลาบอเร่เอทดอลอเร่มักนาอาลิควา.

เนื้อหาของไอเท็ม 1

แอกคอร์เดียนไอเท็ม 2โลเร็มอิปซัมดอเลอร์ซิทอาเมท, คอนเซคเทเทอร์อดิปิซซิงเอลิท.

เนื้อหาของไอเท็ม 2

แอกคอร์เดียนไอเท็ม 3โลเร็มอิปซัมดอเลอร์ซิทอาเมท.

เนื้อหาของไอเท็ม 3

<template>
  <spr-accordion :accordion-items="accordionItems">
    <template #item1> เนื้อหาไอเท็ม 1 </template>
    <template #item2> เนื้อหาไอเท็ม 2 </template>
    <template #item3> เนื้อหาไอเท็ม 3 </template>
  </spr-accordion>
</template>
<script lang="ts" setup>
import { ref } from 'vue';

const accordionItems = ref([
  {
    title: 'แอกคอร์เดียนไอเท็ม 1',
    subtitle:
      'โลเร็มอิปซัมดอเลอร์ซิทอาเมท, คอนเซคเทเทอร์อดิปิซซิงเอลิท. เซดโดอิวส์มอดเทมพอร์อินซิดิดันท์อัทลาบอเร่เอทดอลอเร่มักนาอาลิควา.',
    collapseId: 'item1',
  },
  {
    title: 'แอกคอร์เดียนไอเท็ม 2',
    subtitle: 'โลเร็มอิปซัมดอเลอร์ซิทอาเมท, คอนเซคเทเทอร์อดิปิซซิงเอลิท.',
    collapseId: 'item2',
  },
  {
    title: 'แอกคอร์เดียนไอเท็ม 3',
    subtitle: 'โลเร็มอิปซัมดอเลอร์ซิทอาเมท.',
    collapseId: 'item3',
  },
]);
</script>

ทริกเกอร์แอกคอร์เดียน

โดยค่าเริ่มต้น ทริกเกอร์แอกคอร์เดียนคือปุ่ม คุณสามารถเปลี่ยนองค์ประกอบทริกเกอร์เป็นส่วนหัวโดยตั้งค่า prop accordionTrigger เป็น header

แอกคอร์เดียนไอเท็ม 1โลเร็มอิปซัมดอเลอร์ซิทอาเมท, คอนเซคเทเทอร์อดิปิซซิงเอลิท. เซดโดอิวส์มอดเทมพอร์อินซิดิดันท์อัทลาบอเร่เอทดอลอเร่มักนาอาลิควา.

เนื้อหาไอเท็ม 1

แอกคอร์เดียนไอเท็ม 2โลเร็มอิปซัมดอเลอร์ซิทอาเมท, คอนเซคเทเทอร์อดิปิซซิงเอลิท.

เนื้อหาไอเท็ม 2

แอกคอร์เดียนไอเท็ม 3โลเร็มอิปซัมดอเลอร์ซิทอาเมท.

เนื้อหาไอเท็ม 3

<template>
  <spr-accordion :accordion-items="accordionItems" accordion-trigger="header">
    <template #item1> เนื้อหาไอเท็ม 1 </template>
    <template #item2> เนื้อหาไอเท็ม 2 </template>
    <template #item3> เนื้อหาไอเท็ม 3 </template>
  </spr-accordion>
</template>
<script lang="ts" setup>
import { ref } from 'vue';

const accordionItems = ref([
  {
    title: 'แอกคอร์เดียนไอเท็ม 1',
    subtitle:
      'โลเร็มอิปซัมดอเลอร์ซิทอาเมท, คอนเซคเทเทอร์อดิปิซซิงเอลิท. เซดโดอิวส์มอดเทมพอร์อินซิดิดันท์อัทลาบอเร่เอทดอลอเร่มักนาอาลิควา.',
    collapseId: 'item1',
  },
  {
    title: 'แอกคอร์เดียนไอเท็ม 2',
    subtitle: 'โลเร็มอิปซัมดอเลอร์ซิทอาเมท, คอนเซคเทเทอร์อดิปิซซิงเอลิท.',
    collapseId: 'item2',
  },
  {
    title: 'แอกคอร์เดียนไอเท็ม 3',
    subtitle: 'โลเร็มอิปซัมดอเลอร์ซิทอาเมท.',
    collapseId: 'item3',
  },
]);
</script>

เปิดเสมอ

prop alwaysOpen ช่วยให้คุณตั้งค่าไอเท็มแอกคอร์เดียนให้เปิดเสมอ ซึ่งหมายความว่าเมื่อไอเท็มหนึ่งถูกเปิด อื่นๆ จะยังคงเปิดอยู่

แอกคอร์เดียนไอเท็ม 1โลเร็มอิปซัมดอเลอร์ซิทอาเมท, คอนเซคเทเทอร์อดิปิซซิงเอลิท. เซดโดอิวส์มอดเทมพอร์อินซิดิดันท์อัทลาบอเร่เอทดอลอเร่มักนาอาลิควา.

เนื้อหาไอเท็ม 1

แอกคอร์เดียนไอเท็ม 2โลเร็มอิปซัมดอเลอร์ซิทอาเมท, คอนเซคเทเทอร์อดิปิซซิงเอลิท.

เนื้อหาไอเท็ม 2

แอกคอร์เดียนไอเท็ม 3โลเร็มอิปซัมดอเลอร์ซิทอาเมท.

เนื้อหาไอเท็ม 3

<template>
  <spr-accordion :accordion-items="accordionItems" :always-open="true">
    <template #item1>เนื้อหาไอเท็ม 1</template>
    <template #item2>เนื้อหาไอเท็ม 2</template>
    <template #item3>เนื้อหาไอเท็ม 3</template>
  </spr-accordion>
</template>
<script lang="ts" setup>
import { ref } from 'vue';

const accordionItems = ref([
  {
    title: 'แอกคอร์เดียนไอเท็ม 1',
    subtitle:
      'โลเร็มอิปซัมดอเลอร์ซิทอาเมท, คอนเซคเทเทอร์อดิปิซซิงเอลิท. เซดโดอิวส์มอดเทมพอร์อินซิดิดันท์อัทลาบอเร่เอทดอลอเร่มักนาอาลิควา.',
    collapseId: 'item1',
  },
  {
    title: 'แอกคอร์เดียนไอเท็ม 2',
    subtitle: 'โลเร็มอิปซัมดอเลอร์ซิทอาเมท, คอนเซคเทเทอร์อดิปิซซิงเอลิท.',
    collapseId: 'item2',
  },
  {
    title: 'แอกคอร์เดียนไอเท็ม 3',
    subtitle: 'โลเร็มอิปซัมดอเลอร์ซิทอาเมท.',
    collapseId: 'item3',
  },
]);
</script>

สถานะเริ่มต้น

โดยค่าเริ่มต้น ไอเท็มแอกคอร์เดียนจะถูกซ่อน คุณสามารถเปลี่ยนสถานะเริ่มต้นของไอเท็มแอกคอร์เดียนเมื่อโหลดโดยตั้งค่า isDefaultOpen เป็น true

WARNING

prop isDefaultOpen จะทำงานได้เฉพาะเมื่อ prop alwaysOpen ถูกตั้งค่าเป็น true

แอกคอร์เดียนไอเท็ม 1โลเร็มอิปซัมดอเลอร์ซิทอาเมท, คอนเซคเทเทอร์อดิปิซซิงเอลิท. เซดโดอิวส์มอดเทมพอร์อินซิดิดันท์อัทลาบอเร่เอทดอลอเร่มักนาอาลิควา.

เนื้อหาไอเท็ม 1

แอกคอร์เดียนไอเท็ม 2โลเร็มอิปซัมดอเลอร์ซิทอาเมท, คอนเซคเทเทอร์อดิปิซซิงเอลิท.

เนื้อหาไอเท็ม 2

แอกคอร์เดียนไอเท็ม 3โลเร็มอิปซัมดอเลอร์ซิทอาเมท.

เนื้อหาไอเท็ม 3

<template>
  <spr-accordion :accordion-items="accordionItems" :is-default-open="true" :always-open="true">
    <template #item1>เนื้อหาไอเท็ม 1</template>
    <template #item2>เนื้อหาไอเท็ม 2</template>
    <template #item3>เนื้อหาไอเท็ม 3</template>
  </spr-accordion>
</template>
<script lang="ts" setup>
import { ref } from 'vue';

const accordionItems = ref([
  {
    title: 'แอกคอร์เดียนไอเท็ม 1',
    subtitle:
      'โลเร็มอิปซัมดอเลอร์ซิทอาเมท, คอนเซคเทเทอร์อดิปิซซิงเอลิท. เซดโดอิวส์มอดเทมพอร์อินซิดิดันท์อัทลาบอเร่เอทดอลอเร่มักนาอาลิควา.',
    collapseId: 'item1',
  },
  {
    title: 'แอกคอร์เดียนไอเท็ม 2',
    subtitle: 'โลเร็มอิปซัมดอเลอร์ซิทอาเมท, คอนเซคเทเทอร์อดิปิซซิงเอลิท.',
    collapseId: 'item2',
  },
  {
    title: 'แอกคอร์เดียนไอเท็ม 3',
    subtitle: 'โลเร็มอิปซัมดอเลอร์ซิทอาเมท.',
    collapseId: 'item3',
  },
]);
</script>

การอ้างอิง API

พร็อพเพอร์ตี้

ชื่อ	คำอธิบาย	ประเภท	ค่าเริ่มต้น
accordionItems	อาร์เรย์ของออบเจกต์ที่กำหนดไอเท็มแอกคอร์เดียน แต่ละไอเท็มควรมีคุณสมบัติต่อไปนี้: title (string): หัวข้อหลักสำหรับไอเท็มแอกคอร์เดียน subtitle (string, optional): ข้อความอธิบายเพิ่มเติมที่แสดงอยู่ใต้หัวข้อ collapseId (string): ตัวระบุเฉพาะสำหรับไอเท็มแอกคอร์เดียน ใช้เพื่อจับคู่กับชื่อสล็อต	Array<{ title: string, subtitle?: string, collapseId: string }>	[]
alwaysOpen	เมื่อ true ไอเท็มแอกคอร์เดียนหลายรายการสามารถขยายพร้อมกันได้ เมื่อ false การเปิดไอเท็มหนึ่งจะปิดไอเท็มที่เปิดก่อนหน้านี้	boolean	false
isDefaultOpen	เมื่อ true ไอเท็มแอกคอร์เดียนทั้งหมดจะขยายโดยค่าเริ่มต้นเมื่อคอมโพเนนต์ติดตั้ง หมายเหตุ: คุณสมบัตินี้ทำงานได้เฉพาะเมื่อ alwaysOpen ถูกตั้งค่าเป็น true	boolean	false
accordionTrigger	กำหนดองค์ประกอบใดที่ทำหน้าที่เป็นทริกเกอร์เพื่อขยาย/ยุบไอเท็มแอกคอร์เดียน: header: พื้นที่ส่วนหัวทั้งหมด (รวมถึงหัวข้อและคำบรรยาย) ทำหน้าที่เป็นทริกเกอร์ button: เฉพาะปุ่มสลับทางด้านขวาเท่านั้นที่ทำหน้าที่เป็นทริกเกอร์	'header' | 'button'	'button'
bordered	เมื่อ true แอกคอร์เดียนมีขอบและมุมโค้งรอบคอมโพเนนต์ทั้งหมด เมื่อ false ขอบจะถูกลบออกเพื่อรูปลักษณ์ที่เรียบง่ายมากขึ้น	boolean	true

สล็อต

ชื่อ	คำอธิบาย
${collapseId}	สล็อตไดนามิกที่สอดคล้องกับ collapseId ของแต่ละไอเท็มแอกคอร์เดียน ใช้สล็อตเหล่านี้เพื่อเพิ่มเนื้อหาภายในแผงแอกคอร์เดียนแต่ละแผง

อินเตอร์เฟซของไอเท็มแอกคอร์เดียน

interface AccordionItem {
  title: string; // หัวข้อข้อความหลัก
  subtitle?: string; // ข้อความหัวข้อย่อยเสริม (ไม่บังคับ)
  collapseId: string; // ตัวระบุเฉพาะ (ใช้สำหรับการตั้งชื่อสล็อต)
}