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은 필터 구성 방법을 보여줍니다: