เลือกแบบลำดับชั้น

เลือกแบบลำดับชั้นสำหรับเลือกตัวเลือกที่จัดระเบียบในกลุ่มตามลำดับชั้น เหมาะสำหรับรายการขนาดใหญ่หรือที่มีหมวดหมู่ และรองรับระดับย่อยที่ซ้อนกันอย่างลึกและข้อความรองสำหรับแต่ละรายการ

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

เลือกแบบลำดับชั้น

V-Model: []

vue

<template>
  <spr-select-ladderized
    id="select-ladderized-basic"
    v-model="laderrizedSelectModel"
    :options="options"
    label="เลือกแบบลำดับชั้น"
    placeholder="เลือกตัวเลือก"
  />
</template>

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

const laderrizedSelectModel = ref([]);

const options = ref([
  {
    text: 'เสือ',
    value: 'tiger',
    subtext: 'เสียงคำรามแห่งป่า',
  },
  {
    text: 'สิงโต',
    value: 'lion',
    subtext: 'ราชาแห่งป่า',
    sublevel: [
      {
        text: 'ลูกสิงโต',
        value: 'cub',
        subtext: 'สิงโตหนุ่ม',
        sublevel: [
          { text: 'ลูกสิงโต 1', value: 'cub1' },
          { text: 'ลูกสิงโต 2', value: 'cub2' },
        ],
      },
      {
        text: 'สมาชิกฝูง',
        value: 'pride-member',
        subtext: 'สมาชิกของฝูงสิงโต',
      },
    ],
  },
  {
    text: 'ช้าง',
    value: 'elephant',
    subtext: 'สัตว์บกที่ใหญ่ที่สุด',
    sublevel: [
      {
        text: 'ลูกช้าง',
        value: 'calf',
        subtext: 'ช้างหนุ่ม',
      },
    ],
  },
  {
    text: 'ยีราฟ',
    value: 'giraffe',
    subtext: 'สัตว์บกที่สูงที่สุดที่ยังมีชีวิตอยู่',
    sublevel: [
      {
        text: 'ลูกยีราฟ',
        value: 'giraffe-calf',
        subtext: 'ยีราฟหนุ่ม',
      },
      {
        text: 'ยีราฟโต',
        value: 'giraffe-adult',
        subtext: 'ยีราฟที่โตเต็มวัย',
      },
    ],
  },
  {
    text: 'ม้าลาย',
    value: 'zebra',
    subtext: 'ขึ้นชื่อเรื่องลายดำขาวที่โดดเด่น',
    sublevel: [
      {
        text: 'ลูกม้าลาย',
        value: 'zebra-foal',
        subtext: 'ม้าลายหนุ่ม',
      },
      {
        text: 'แม่ม้าลาย',
        value: 'zebra-mare',
        subtext: 'ม้าลายเพศเมียโต',
      },
    ],
  },
  {
    text: 'มด',
    value: 'ant',
    subtext: 'แมลงสังคมที่มีการจัดระเบียบสูง',
    sublevel: [
      {
        text: 'อาณานิคม',
        value: 'ant-colony',
        subtext: 'ชุมชนมดทั้งหมด',
        sublevel: [
          {
            text: 'ห้องราชินี',
            value: 'queen-chamber',
            subtext: 'ที่ที่ราชินีอาศัยอยู่',
            sublevel: [
              {
                text: 'มดราชินี',
                value: 'queen-ant',
                subtext: 'เพศเมียที่สืบพันธุ์',
                sublevel: [
                  {
                    text: 'ผู้วางไข่',
                    value: 'egg-layer',
                    subtext: 'บทบาทหลักของราชินี',
                    sublevel: [
                      {
                        text: 'ไข่ใหม่',
                        value: 'new-eggs',
                        subtext: 'ไข่ที่เพิ่งวาง',
                      },
                      {
                        text: 'ตัวอ่อนกำลังพัฒนา',
                        value: 'developing-larvae',
                        subtext: 'ไข่ที่กำลังเติบโตเป็นมด',
                      },
                    ],
                  },
                ],
              },
            ],
          },
          {
            text: 'ส่วนของผู้ทำงาน',
            value: 'worker-section',
            subtext: 'มดทำงานดำเนินการที่นี่',
            sublevel: [
              {
                text: 'ผู้หาอาหาร',
                value: 'foragers',
                subtext: 'รวบรวมอาหาร',
              },
              {
                text: 'พยาบาล',
                value: 'nurses',
                subtext: 'ดูแลตัวอ่อน',
              },
            ],
          },
          {
            text: 'ป้อมทหาร',
            value: 'soldier-post',
            subtext: 'ยามเฝ้าของอาณานิคม',
          },
        ],
      },
    ],
  },
]);
</script>

ตัวเลือกสามารถมีระดับย่อยที่ซ้อนกันได้ ซึ่งอนุญาตให้มีลำดับชั้นที่ซับซ้อน แต่ละรายการของ sublevel สามารถมีระดับย่อยเพิ่มเติมได้เอง รองรับการซ้อนกันไม่สิ้นสุด แต่ละรายการสามารถมี text, value, และ subtext ที่เป็นตัวเลือกสำหรับข้อมูลเพิ่มเติม

นี่คือโครงสร้าง JSON พื้นฐานของตัวเลือก:

json

[
  {
    "text": <ข้อความ>,
    "value": <ค่า>,
    "subtext": <ข้อความรอง>,
    "sublevel": [
      {
        "text": <ข้อความ>,
        "value": <ค่า>,
        "subtext": <ข้อความรอง>,
        "sublevel": [
          {
            "text": <ข้อความ>,
            "value": <ค่า>,
            "subtext": <ข้อความรอง>,
            "sublevel": [...]
          },
        ]
      },
      ...
    ]
  }
  ...
]

ตัวเลือกที่เลือกไว้ล่วงหน้า

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

['lion', 'cub', 'cub1'];

ค่าแรกคือตัวเลือกหลัก (lion)
ค่าที่สองคือตัวเลือกย่อยของ lion (cub)
ค่าที่สามคือตัวเลือกย่อยของ cub (cub1)

เลือกแบบลำดับชั้น

 V-Model: [
  "lion",
  "cub",
  "cub1"
]

ตัวคั่นข้อความ

คุณสามารถปรับแต่งตัวคั่นระหว่างค่าในข้อความป้อนข้อมูลแบบลำดับชั้นได้โดยส่งพร็อพส์ text-seperator ตัวคั่นเริ่มต้นคือ ' > '.

เลือกแบบลำดับชั้น

vue

<template>
  <spr-select-ladderized
    id="select-ladderized-text-seperator1"
    v-model="laderrizedSelectModel"
    :options="options"
    label="เลือกแบบลำดับชั้น"
    placeholder="เลือกตัวเลือก"
  />

  <spr-select-ladderized
    id="select-ladderized-text-seperator2"
    v-model="laderrizedSelectModel"
    :options="options"
    label="เลือกแบบลำดับชั้น"
    placeholder="เลือกตัวเลือก"
    text-seperator=", "
  />
</template>

เพิ่มข้อความนำหน้า

คุณสามารถเพิ่มข้อความนำหน้าในข้อความป้อนข้อมูลแบบลำดับชั้นได้โดยส่งพร็อพส์ prepend-text

เลือกแบบลำดับชั้น

V-Model: []

vue

<template>
  <spr-select-ladderized
    id="select-ladderized-prepend-text"
    v-model="laderrizedSelectModel"
    :options="options"
    label="เลือกแบบลำดับชั้น"
    placeholder="เลือกตัวเลือก"
    prepend-text
  />
</template>

ค้นหา

เพื่อเปิดใช้งานการค้นหาผ่านตัวเลือก ให้ตั้งค่าพร็อพส์ searchable-options เป็น true สิ่งนี้จะอนุญาตให้ผู้ใช้กรองตัวเลือกโดยพิมพ์ในช่องป้อนข้อมูล

คุณยังสามารถส่งพร็อพส์ searchable-options-placeholder เพื่อปรับแต่งข้อความตัวยึดตำแหน่งสำหรับช่องป้อนการค้นหาได้

เลือกแบบลำดับชั้น

V-Model: []

vue

<template>
  <spr-select-ladderized
    id="select-ladderized-searchable-options"
    v-model="laderrizedSelectModel"
    :options="options"
    label="เลือกแบบลำดับชั้น"
    placeholder="เลือกตัวเลือก"
    searchable-options
  />
</template>

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

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

อัตโนมัติ

อัตโนมัติเริ่มต้น

อัตโนมัติสิ้นสุด

บน

บนเริ่มต้น

บนสิ้นสุด

ขวา

ขวาเริ่มต้น

ขวาสิ้นสุด

ล่าง

ล่างเริ่มต้น

ล่างสิ้นสุด

ซ้าย

ซ้ายเริ่มต้น

ซ้ายสิ้นสุด

ล้างได้

เพื่ออนุญาตให้ผู้ใช้ล้างค่าที่เลือก ให้ตั้งค่าพร็อพส์ clearable เป็น true สิ่งนี้จะแสดงไอคอนล้าง (x) ข้างค่าที่เลือก ซึ่งสามารถคลิกเพื่อรีเซ็ตการเลือก

เลือกแบบลำดับชั้น

V-Model: []

vue

<template>
  <spr-select-ladderized
    id="select-ladderized-clearable"
    v-model="laderrizedSelectModel"
    :options="options"
    label="เลือกแบบลำดับชั้น"
    placeholder="เลือกตัวเลือก"
    clearable
  />
</template>

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

คุณสามารถแก้ไขความกว้างของคอมโพเนนต์เลือกได้สองวิธี: โดยการปรับความกว้างของตัวครอบการเลือกหรือโดยการเปลี่ยนความกว้างของป๊อปเปอร์ของการเลือก

Width - ความกว้างโดยรวมขององค์ประกอบครอบทั้งหมดและองค์ประกอบป๊อปเปอร์

Popper Width - ความกว้างขององค์ประกอบป๊อปเปอร์เท่านั้น

เลือกแบบลำดับชั้น

vue

<template>
  <spr-select-ladderized
    id="select-ladderized-width"
    v-model="laderrizedSelectModel"
    :options="options"
    label="เลือกแบบลำดับชั้น"
    placeholder="เลือกตัวเลือก"
    width="50%"
    popper-width="200px"
  />
</template>

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

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

โดยค่าเริ่มต้น กลยุทธ์ป๊อปเปอร์ถูกตั้งค่าเป็น absolute ซึ่งจัดตำแหน่งองค์ประกอบป๊อปเปอร์สัมพันธ์กับบรรพบุรุษที่จัดตำแหน่งที่ใกล้ที่สุด (โดยปกติคือองค์ประกอบ body) อย่างไรก็ตาม คุณสามารถเปลี่ยน strategy เป็น fixed ซึ่งจัดตำแหน่งองค์ประกอบป๊อปเปอร์สัมพันธ์กับวิวพอร์ต เพื่อให้แน่ใจว่ามันยังคงอยู่ในตำแหน่งเดิมแม้ว่าจะเลื่อนหน้าเว็บ

ส่งพร็อพส์ popper-strategy เพื่อเปลี่ยนพฤติกรรมตำแหน่งของป๊อปเปอร์

สิ่งสำคัญที่ต้องทราบ:

อย่าลืมส่งพร็อพส์ wrapperPosition เพื่อแทนที่ตำแหน่ง relative เป็น initial

vue

<template>
  <spr-button tone="success" @click="modalModel = true">เปิดโมดอล</spr-button>

  <spr-modal v-model="modalModel" title="เลือกด้วยโมดอล">
    <spr-select-ladderized
      id="select-ladderized-popper-strategy"
      v-model="laderrizedSelectModel"
      label="เลือกแบบลำดับชั้น"
      placeholder="เลือกตัวเลือก"
      :options="options"
      popper-strategy="fixed"
      wrapper-position="initial"
    />
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore
      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat.
    </p>
  </spr-modal>
</template>

คุณยังสามารถใช้พร็อพส์ popper-container เพื่อระบุคอนเทนเนอร์ที่กำหนดเองสำหรับองค์ประกอบป๊อปเปอร์ได้ สิ่งนี้มีประโยชน์เมื่อคุณต้องการจำกัดบริบทการจัดตำแหน่งของป๊อปเปอร์ให้กับองค์ประกอบเฉพาะภายในแอปพลิเคชันของคุณ

เนื่องจากป๊อปเปอร์ถูกส่งไปยังคอนเทนเนอร์อื่น พร็อพส์ popper-width จะไม่ทำงานตามที่คาดหวัง เพื่อตั้งค่าความกว้างที่กำหนดเองสำหรับป๊อปเปอร์ในกรณีนี้ คุณสามารถใช้สไตล์ที่กำหนดเองหรือคลาส CSS เพื่อกำหนดความกว้างที่ต้องการ

vue

<template>
  <spr-dropdown
    id="dropdown-custom-popper"
    width="300px"
    :triggers="['hover', 'click']"
    :popper-triggers="['hover', 'click']"
    popper-width="500px"
    :auto-hide="false"
  >
    <spr-button class="spr-w-full" tone="success" has-icon>
      <span>ป๊อปเปอร์ที่กำหนดเองด้วยดร็อปดาวน์</span>
      <Icon icon="ph:caret-down" />
    </spr-button>
    <template #popper>
      <spr-select-ladderized
        id="select-ladderized-dropdown-custom-popper"
        v-model="laderrizedSelectModel"
        label="เลือกแบบลำดับชั้น"
        placeholder="เลือกตัวเลือก"
        :options="options"
        popper-strategy="fixed"
        popper-container="#dropdown-custom-popper"
        wrapper-position="initial"
      />
    </template>
  </spr-dropdown>
</template>

สถานะใช้งานอยู่ ปิดใช้งาน และข้อผิดพลาด

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

สถานะใช้งานอยู่

เลือกแบบลำดับชั้น

vue

<template>
  <spr-select-ladderized
    id="select-ladderized-active-state"
    v-model="laderrizedSelectModel"
    label="เลือกแบบลำดับชั้น"
    placeholder="เลือกตัวเลือก"
    :options="options"
    active
  />
</template>

สถานะปิดใช้งาน

เลือกแบบลำดับชั้น

vue

<template>
  <spr-select-ladderized
    id="select-ladderized-disabled-state"
    v-model="laderrizedSelectModel"
    label="เลือกแบบลำดับชั้น"
    placeholder="เลือกตัวเลือก"
    :options="options"
    disabled
  />
</template>

สถานะข้อผิดพลาด

เลือกแบบลำดับชั้น

vue

<template>
  <spr-select-ladderized
    id="select-ladderized-error-state"
    v-model="laderrizedSelectModel"
    label="เลือกแบบลำดับชั้น"
    placeholder="เลือกตัวเลือก"
    :options="options"
    error
  />
</template>

ข้อมูลอ้างอิง API

ชื่อ	คำอธิบาย	ประเภท	ค่าเริ่มต้น
`id`	ID ที่ไม่ซ้ำสำหรับการเลือก จำเป็นเพื่อผูกป๊อปเปอร์ภายในการเลือก	String	—
`v-model`	การผูกค่าของการเลือก ยอมรับอาร์เรย์ของสตริง	Array	`[]`
`options`	รายการตัวเลือก (พร้อมระดับย่อยที่เป็นตัวเลือกสำหรับลำดับชั้น)	Array	`[]`
`label`	ป้ายกำกับสำหรับช่องป้อนเลือก	String	''
`supporting-label`	ข้อความข้างป้ายกำกับที่มีสไตล์สนับสนุน	string	''
`input-loader`	แสดงสปินเนอร์การโหลดภายในช่องป้อนเลือกขณะดึงตัวเลือกแบบอะซิงโครนัส (รวมถึงระดับย่อยที่ซ้อนกัน) มีประโยชน์สำหรับการโหลดข้อมูลลำดับชั้นที่ขับเคลื่อนด้วย API	Boolean	false
`placeholder`	ตัวยึดตำแหน่งช่องป้อน	String	`''`
`text-seperator`	ปรับแต่งตัวคั่นระหว่างค่าในข้อความป้อนข้อมูลแบบลำดับชั้น	String	`' > '`
`prepend-text`	เพิ่มข้อความนำหน้าในข้อความป้อนข้อมูลแบบลำดับชั้น	Boolean	`false`
`helper-text`	ข้อความช่วยเหลือใต้ช่องป้อน	String	`''`
`helper-icon`	ไอคอนสำหรับข้อความช่วยเหลือ	String	`null`
`display-helper`	แสดงข้อความช่วยเหลือ	Boolean	`false`
`clearable`	แสดงไอคอนล้าง (x) เพื่อลบค่าที่เลือก	Boolean	`false`
`placement`	การจัดตำแหน่งป๊อปเปอร์ (เช่น 'bottom', 'top', 'auto', ฯลฯ)	String	`bottom`
`triggers`	อาร์เรย์ของอีเวนต์ที่จะทริกเกอร์ดร็อปดาวน์ให้เปิด	'click' \| 'hover' \| 'focus' \| 'touch'[]	['click']
`popper-triggers`	อาร์เรย์ของอีเวนต์ที่จะทริกเกอร์เมนูดร็อปดาวน์ (องค์ประกอบป๊อปเปอร์) ให้เปิด	'click' \| 'hover' \| 'focus' \| 'touch'[]	[]
`auto-hide`	เมื่อเป็นจริง จะซ่อนดร็อปดาวน์โดยอัตโนมัติเมื่อคลิกภายนอก	Array	true
`wrapper-position`	CSS position ของตัวครอบ	String	`relative`
`width`	ความกว้างของตัวครอบการเลือก	String	`100%`
`popper-width`	ความกว้างของป๊อปเปอร์การเลือก	String	`100%`
`popper-strategy`	กลยุทธ์การจัดตำแหน่งป๊อปเปอร์ ('absolute' หรือ 'fixed')	String	`absolute`
`popper-container`	ซีเลกเตอร์ CSS หรือ HTMLElement เพื่อระบุคอนเทนเนอร์ที่กำหนดเองสำหรับองค์ประกอบป๊อปเปอร์	String \| HTMLElement	''
`disabled`	ปิดใช้งานการเลือก	Boolean	`false`
`remove-current-level-in-back-label`	ซ่อนระดับปัจจุบันในป้ายกลับ	Boolean	`false`
`searchable-options`	เปิดใช้งานช่องป้อนการค้นหาเพื่อกรองตัวเลือก	Boolean	`false`
`searchable-options-placeholder`	ตัวยึดตำแหน่งของตัวเลือกการค้นหา	String	`'Search...'`
`writableInputText`	เปิดใช้งานข้อความป้อนข้อมูลให้เขียนได้ สิ่งนี้ไม่ส่งผลต่อฟังก์ชันการค้นหา	Boolean	`false`
`options-loader`	แสดงโครงกระดูกการโหลดภายในป๊อปเปอร์ มีประโยชน์ขณะดึงตัวเลือกแบบอะซิงโครนัส (เช่น การค้นหา API)	Boolean	false
`infinite-scroll-loader`	แสดงสปินเนอร์การโหลดที่ด้านล่างของรายการเมื่อทริกเกอร์เลื่อนไม่สิ้นสุด มีประโยชน์เมื่อโหลดรายการเพิ่มเติมเมื่อผู้ใช้เลื่อนถึงส่วนท้ายของรายการ	Boolean	false

อีเวนต์

อีเวนต์	เพย์โหลด	คำอธิบาย
`@update:modelValue`	Array \| String \| Number \| Object	ปล่อยออกมาทุกครั้งที่การเลือกเปลี่ยนแปลง เพย์โหลดคือค่าที่เลือกใหม่
@popper-state	Boolean	อีเวนต์ที่ปล่อยออกมาทุกครั้งที่คุณเปิดหรือปิดป๊อปเปอร์

ปุ่ม

ปฏิทิน

แผงด้านข้าง

ตาราง

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

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

เรดิโอ