searchcraft-filter-panel

This web component represents a series of filters that allows users to refine and control their search queries by applying various filter criteria.

Import

React

import { SearchcraftFilterPanel } from "@searchcraft/react-sdk";

Vue

import { SearchcraftFilterPanel } from "@searchcraft/vue-sdk";

Usage

JS

index.html

<searchcraft-filter-panel />

index.js

const filterPanel = document.querySelector('searchcraft-filter-panel');

if (filterPanel) {
  filterPanel.items = [];
}

React

<SearchcraftFilterPanel items={[]} />

Vue

<SearchcraftFilterPanel :items="[]" />

Properties

Property	Attribute	Description	Type	Default
items	—	The items to filter.	FilterItem[]	[]
responsiveBehavior	responsive-behavior	Controls whether the filter panel automatically hides/shows based on window size. - ‘auto’: Automatically hide/show based on window width - ‘manual’: User controls visibility manually	"auto" | "manual" | undefined	'auto'
responsiveBreakpoint	responsive-breakpoint	The breakpoint (in pixels) below which the filter panel will be hidden. Defaults to 768px (—sc-breakpoint-md).	number | undefined	768
searchcraftId	searchcraft-id	The id of the Searchcraft instance that this component should use.	string | undefined	undefined