Signature
Import
- Component
- Plugin
To ensure optimal bundle sizes,
see Optimize build size.
Vue
About this widget
Theais-panel
widget wraps other widgets in a consistent panel design.
It also reacts by adding a CSS class when the widget no longer can refine.
An example is when a ais-refinement-list
becomes empty because of the current search results.
Examples
Vue
Props
The CSS classes you can override:
ais-Panel
. The root of the widget.ais-Panel--noRefinement
. The root of the widget without refinement.ais-Panel-header
. The header of the widget.ais-Panel-body
. The content of the widget.ais-Panel-footer
. The footer of the widget.
Vue
Customize the UI
default
The slot to provide a body to the widget.Note that when you implement this slot, none of the other slots will change the output, as the default slot surrounds them.Scope
hasRefinements: boolean
. Whether the inner widget can refine, will befalse
if it has no possible refinements.
Vue
header
The slot to provide a header to the widget.Scope
hasRefinements: boolean
. Whether the inner widget can refine, will befalse
if it has no possible refinements.
Vue
The slot to provide a footer to the widget.Scope
hasRefinements: boolean
. Whether the inner widget can refine, will befalse
if it has no possible refinements.
Vue
HTML output
HTML