본문으로 건너뛰기

filterShape

설명

선택 사항. 필터 기능을 관리하기 위한 설정 객체

사용법

filterShape: {
text?: boolean | [{
id: string,
label?: string,
suggest?: boolean
}],
date?: boolean,
time?: boolean | [{
from: number | string,
to: number | string,
label?: string
}],
autoApply?: boolean
};

Parameters

  • text - (선택 사항) true이면 텍스트 입력 필드가 표시됩니다(기본값). false이면 텍스트 필드가 숨겨집니다.
    • id - (필수) 필터링할 카드 필드의 이름 (data 속성으로, 예: category 또는 title)
    • suggest - (선택 사항) true이면 자동 완성이 활성화되어 사용자 입력 텍스트와 일치하는 값(data 객체의 값)이 표시됩니다.
    • label - (선택 사항) data 객체 속성의 레이블. 아래 기본 설정을 참조하세요.
  • date - (선택 사항) 날짜 필드를 표시하거나 숨깁니다. 기본값은 true입니다(필드가 표시됨).
  • time - (선택 사항) 시간 필드를 표시하거나 숨깁니다. true로 설정하면 슬롯의 기본 시간 옵션 객체 배열을 사용합니다. 각 객체에는 다음 parameters를 지정할 수 있습니다:
    • from - (필수) 슬롯의 시작 시간. 0에서 24 사이의 숫자로 시간을 지정하거나(예: 9는 9:00, 8.5는 8:30) "h:m" 형식의 문자열(예: "8:30")로 지정할 수 있습니다.
    • to - (필수) 슬롯의 종료 시간. 0에서 24 사이의 숫자로 시간을 지정하거나(예: 9는 9:00, 8.5는 8:30) "h:m" 형식의 문자열(예: "8:30")로 지정할 수 있습니다.
    • label - (선택 사항) 시간 필드의 placeholder time parameters가 설정되지 않은 경우 기본값이 적용됩니다. 아래 기본 설정을 참조하세요.
  • autoApply - (선택 사항) true이면 검색 기준이 자동으로 적용됩니다(버튼 클릭 없이 검색 시작). 기본값은 false입니다.

기본 설정

const defaultTimeRanges = [
{ from: 8, to: 12, label: "Morning" },
{ from: 12, to: 17, label: "Afternoon" },
{ from: 17, to: 20, label: "Evening" }
];

const defaultFilterShape = {
text: [
{ id: "category", label: "speciality", suggest: true },
{ id: "title", label: "specialist", suggest: true },
{ id: "details", label: "location" }
],
date: true,
time: defaultTimeRanges,
autoApply: false
};

예제

const filterShape = {
date: false,
autoApply: true,
time: [
{ from: 8, to: 11, label: "Morning" },
{ from: 12, to: 18, label: "Afternoon" },
{ from: 18, to: 21, label: "Evening" }
]
};

new booking.Booking("#root", {
data,
filterShape,
// other parameters
});

아래 snippet은 필터 구성 방법을 보여줍니다: