panel
panel({ // Optional parameters hidden: function, collapsed: function, templates: object, cssClasses: object, });
1
import { panel } from 'instantsearch.js/es/widgets';
About this widget
The panel
widget wraps other widgets in a consistent panel design. It also reacts by adding a CSS class when the widget can no longer refine. For example, when a refinementList
becomes empty because of the current search results.
Examples
1
2
3
4
5
6
7
8
9
10
const refinementListWithPanel = panel({
templates: {
header: 'Brand',
},
})(refinementList);
refinementListWithPanel({
container: '#refinement-list',
attribute: 'brand',
});
Options
type: function
default: () => false
Optional
A function that is called on each render to determine if the panel should be hidden based on the render options. If the function returns This function receives all rendering parameters provided by the inner widget. |
|||
Copy
|
|||
collapsed
|
type: function
Optional
A function that is called on each render to determine if the panel should be collapsed based on the render options. Providing this option adds the CSS class This function receives all rendering parameters provided by the inner widget. |
||
Copy
|
|||
templates
|
type: object
Optional
The templates to use for the widget. |
||
Copy
|
|||
cssClasses
|
type: object
default: {}
Optional
The CSS classes you can override:
|
||
Copy
|
Templates
You can customize parts of the widget’s UI using the Templates API.
Every template provides an html
function you can use as a tagged template. Using html
lets you safely provide templates as an HTML string. It works directly in the browser without a build step. See Templating your UI for more information.
The html
function is available starting from v4.46.0.
header
|
type: string|function
Optional
The template used for displaying the header. It exposes:
|
||
Copy
|
|||
footer
|
type: string|function
Optional
The template used for displaying the footer. It exposes:
|
||
Copy
|
|||
collapseButtonText
|
type: string|function
Optional
The template used for displaying the collapse button. It exposes:
|
||
Copy
|
HTML output
1
2
3
4
5
6
7
<div class="ais-Panel">
<div class="ais-Panel-header">
<span>Header</span>
</div>
<div class="ais-Panel-body">Panel content</div>
<div class="ais-Panel-footer">Footer</div>
</div>