ระบบการออกแบบ Sprout

ไทย

English

ไทย

English

Appearance

ตัวกรองคุณลักษณะ ​

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

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

Status
0
vue
<template>
  <SprAttributeFilter
    id="attribute_filter1"
    :filter-label="'Status'"
    width="70px"
    popper-width="300px"
    placement="bottom-start"
    :filter-menu-list="filterList"
  />
</template>
<script lang="ts" setup>
import { ref } from 'vue';

const filterList = ref([
  { text: 'Approved', value: 'Approved' },
  { text: 'Completed', value: 'Completed' },
  { text: 'In Progress', value: 'In Progress' },
  { text: 'Pending', value: 'Pending' },
  { text: 'Rejected', value: 'Rejected' },
  { text: 'On Hold', value: 'On Hold' },
]);
</script>

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

Status
0
vue
<template>
  <SprAttributeFilter
    id="attribute_filter5"
    :filter-label="'Status'"
    width="70px"
    popper-width="300px"
    placement="bottom-start"
    :filter-menu-list="filterList"
  />
</template>
<script lang="ts" setup>
import { ref } from 'vue';

const filterList = ref([
  { text: 'Approved', value: 'Approved' },
  { text: 'Completed', value: 'Completed' },
  { text: 'In Progress', value: 'In Progress' },
  { text: 'Pending', value: 'Pending' },
  { text: 'Rejected', value: 'Rejected' },
  { text: 'On Hold', value: 'On Hold' },
]);
</script>

ทริกเกอร์ตัวกรองคุณลักษณะ ​

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

vue
<template>
  <SprAttributeFilter
    id="attribute_filter2"
    :filter-label="'Status'"
    width="70px"
    popper-width="300px"
    placement="bottom-start"
    :filter-menu-list="filterList"
  >
    <SprButton tone="success"> Status </SprButton>
  </SprAttributeFilter>
</template>
<script lang="ts" setup>
import { ref } from 'vue';

const filterList = ref([
  { text: 'Approved', value: 'Approved' },
  { text: 'Completed', value: 'Completed' },
  { text: 'In Progress', value: 'In Progress' },
  { text: 'Pending', value: 'Pending' },
  { text: 'Rejected', value: 'Rejected' },
  { text: 'On Hold', value: 'On Hold' },
]);
</script>

ค้นหา ​

เพื่อแสดงอินพุตการค้นหาภายในป๊อปเปอร์ตัวกรองคุณลักษณะ ตั้งค่า prop searchable เป็น true คุณยังสามารถผูกโมเดลกับอินพุตการค้นหาโดยใช้ directive v-model:search

INFO

สำหรับการค้นหา API ปิดใช้งานการค้นหาในเครื่องโดยตั้งค่า prop disableLocalSearch เป็น true

Status w/ Local Search
0
Status w/o Local Search
0
vue
<template>
  <div class="spr-flex spr-items-center spr-gap-2">
    <SprAttributeFilter
      id="attribute_filter3"
      :filter-label="'Status w/ Local Search'"
      width="180px"
      v-model:search="searchString1"
      popper-width="300px"
      placement="bottom-start"
      :searchable="true"
      :filter-menu-list="filterList"
    />

    <SprAttributeFilter
      id="attribute_filter4"
      :filter-label="'Status w/o Local Search'"
      width="180px"
      popper-width="300px"
      placement="bottom-start"
      :searchable="true"
      :disable-local-search="true"
      :filter-menu-list="filterList"
      @update:search="handleSearch"
    />
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';

const searchString1 = ref('');
const searchString2 = ref('');

const filterList = ref([
  { text: 'Approved', value: 'Approved' },
  { text: 'Completed', value: 'Completed' },
  { text: 'In Progress', value: 'In Progress' },
  { text: 'Pending', value: 'Pending' },
  { text: 'Rejected', value: 'Rejected' },
  { text: 'On Hold', value: 'On Hold' },
]);

const handleSearch = (search: string) => {
  //do something with search term
};
</script>

API Reference ​

Props ​

ชื่อคำอธิบายประเภทค่าเริ่มต้น
id

ตัวระบุเฉพาะสำหรับคอมโพเนนต์

string'attribute_filter'
filterLabel

ป้ายกำกับที่แสดงบนทริกเกอร์ตัวกรอง

string'Filter'
headerLabel

ป้ายกำกับที่แสดงบนส่วนหัวป๊อปเปอร์ตัวกรอง

string'Add Filter'
disabledเมื่อเป็นจริง ปิดใช้งานคอมโพเนนต์ชิปและดร็อปดาวน์ตัวกรองจากการเปิดbooleanfalse
multiselectเปิดใช้งานการเลือกหลายตัวเลือกการกรองbooleanfalse
filterMenuListรายการตัวเลือกการกรองที่จะแสดงในดร็อปดาวน์{text: string, value: string}[] | string[][]
searchableเปิดใช้งานเพื่อแสดงอินพุตการค้นหาภายในดร็อปดาวน์ตัวกรองbooleanfalse
disableLocalSearchเมื่อเป็นจริง ปิดใช้งานฟังก์ชันการค้นหาในเครื่องภายในดร็อปดาวน์ตัวกรองbooleanfalse
showSelectedFilterCountเมื่อเป็นจริง แสดงแบดจ์ในทริกเกอร์คอมโพเนนต์ชิปที่ระบุจำนวนตัวกรองที่เลือกbooleantrue
selectedFilterCountตั้งค่าข้อความที่จะแสดงในแบดจ์ที่ระบุจำนวนตัวกรองที่เลือก หากไม่ระบุและ prop no list เป็นเท็จ จะใช้ค่าเริ่มต้นเป็นความยาวของตัวกรองที่เลือกstringundefined
badgeVariantรูปแบบตัวแปรสำหรับแบดจ์ที่แสดงบนทริกเกอร์คอมโพเนนต์ชิป'brand' | 'information' | 'danger' | 'disabled''danger'
noListเมื่อเป็นจริง จะไม่แสดงรายการตัวกรอง จะใช้หากให้สล็อต bodybooleanfalse
clearableเมื่อเป็นจริง จะแสดงไอคอน X ในทริกเกอร์ชิปเริ่มต้นเพื่อล้างตัวกรองที่เลือก หรือหากไม่มีรายการ จะทริกเกอร์เหตุการณ์ onClearFilterbooleanfalse

Props เฉพาะดร็อปดาวน์ ​

ชื่อคำอธิบายประเภทค่าเริ่มต้น
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 สำหรับดร็อปดาวน์ตัวกรองstring'relative'
widthความกว้างของ wrapper ตัวกรอง (รวมถึงองค์ประกอบทริกเกอร์)string'100%'
popper-widthความกว้างของดร็อปดาวน์ตัวกรองที่ปรากฏเมื่อถูกทริกเกอร์string'100%'
popper-inner-widthความกว้างของพื้นที่เนื้อหาภายในของดร็อปดาวน์ตัวกรองstring'unset'
popper-strategyกลยุทธ์การจัดตำแหน่งสำหรับดร็อปดาวน์ตัวกรอง โดยเฉพาะอย่างยิ่งสำคัญในโมดอล'absolute' | 'fixed''absolute'
triggersอาร์เรย์ของเหตุการณ์ที่จะทริกเกอร์ดร็อปดาวน์ตัวกรองให้เปิด'click' | 'hover' | 'focus' | 'touch'[][]
popper-triggersอาร์เรย์ของเหตุการณ์ที่จะทริกเกอร์เมนูดร็อปดาวน์ตัวกรอง (องค์ประกอบป๊อปเปอร์) ให้เปิด'click' | 'hover' | 'focus' | 'touch'[][]
auto-hideเมื่อเป็นจริง จะซ่อนดร็อปดาวน์ตัวกรองโดยอัตโนมัติเมื่อคลิกภายนอกbooleantrue

เหตุการณ์ ​

ชื่อคำอธิบายพารามิเตอร์
onSaveFilterถูกปล่อยเมื่อคลิกปุ่มบันทึกในส่วนท้ายเริ่มต้น(savedFilters: MenuListType[])
onOpenFilterถูกปล่อยเมื่อแสดงดร็อปดาวน์ตัวกรอง-
onCloseFilterถูกปล่อยเมื่อปิดดร็อปดาวน์ตัวกรอง-
onSelectFilterถูกปล่อยเมื่อเลือกตัวเลือกการกรองจากดร็อปดาวน์(selectedFilters: MenuListType[])
infiniteScrollTriggerถูกปล่อยเมื่อผู้ใช้เลื่อนไปที่ด้านล่างของดร็อปดาวน์ตัวกรอง-
@update:searchถูกปล่อยเมื่อค่าอินพุตการค้นหาเปลี่ยน(searchString: string)
onClearFilterถูกปล่อยเมื่อการดำเนินการล้างถูกทริกเกอร์เพื่อรีเซ็ตตัวกรองที่เลือก-

สล็อต ​

ชื่อคำอธิบาย
defaultสล็อตสำหรับทริกเกอร์ของดร็อปดาวน์ตัวกรอง ค่าเริ่มต้นเป็นคอมโพเนนต์ชิป
headerสล็อตสำหรับส่วนหัวภายในดร็อปดาวน์ตัวกรอง
actionsสล็อตสำหรับการดำเนินการเพิ่มเติมภายในดร็อปดาวน์ตัวกรอง วางระหว่างส่วนหัว (คอนเทนเนอร์การค้นหาหากค้นหาได้) และเนื้อหา
bodyสล็อตสำหรับเนื้อหาหลัก ค่าเริ่มต้นเป็นคอมโพเนนต์รายการ
footerสล็อตสำหรับส่วนท้ายภายในดร็อปดาวน์ตัวกรอง ค่าเริ่มต้นเป็นปุ่มยกเลิกและบันทึก

ลิขสิทธิ์ © 2025 วิศวกร Frontend ของ Sprout