widgets panel

Description

The panel widget wraps other widgets in a consistent panel design. It also reacts, indicates and sets CSS classes when widgets are no more relevant for refining.

Live example

You can find an example at the end of the page or a live example in our widget showcase.

Usage

const search = instantsearch( /* parameters */ );

const widget = instantsearch.widgets.panel({ 
  hidden: [function], 
  templates: [PanelTemplates], 
  cssClasses: [PanelWidgetCSSClasses], 
}: PanelWidgetOptions);

search.addWidget(widget);

Options

PanelWidgetOptions

• hidden[function]

  This function is called on each render to determine from the render options if the panel have to be hidden or not. If the value is true the CSS class noRefinementRoot is applied and the wrapper is hidden.

• templates[PanelTemplates]

  Templates to use for the widgets.

• cssClasses[PanelWidgetCSSClasses]

  CSS classes to add.

PanelTemplates

• header[string|function]
  Default value: ''

  Template to use for the header.

• footer[string|function]
  Default value: ''

  Template to use for the footer.

PanelWidgetCSSClasses

• root[string|Array<string>]

  CSS classes added to the root element of the widget.

• noRefinementRoot[string|Array<string>]

  CSS classes added to the root element of the widget when there’s no refinements.

• header[string|Array<string>]

  CSS class to add to the header.

• footer[string|Array<string>]

  CSS class to add to the SVG footer.

Example

const refinementListWithPanel = instantsearch.widgets.panel({
  templates: {
    header: 'Brand',
  },
})(instantsearch.widgets.refinementList);

search.addWidget(
  refinementListWithPanel({
    container: '#refinement-list',
    attribute: 'brand',
  })
);

Can't find what you are looking for? Open an issue, we'll get back to you.