<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>
Hint: hover classes below to see their position.
| name | description |
|---|---|
.ais-Panel | the root div of the Panel |
.ais-Panel--noRefinement | the root div of the Panel with no refinements |
.ais-Panel--collapsible | the root div of the collapsible Panel |
.ais-Panel--collapsed | the root div of the collapsed collapsible Panel |
.ais-Panel-header | the header of the Panel (optional) |
.ais-Panel-body | the body of the Panel |
.ais-Panel-footer | the footer of the Panel (optional) |
.ais-Panel-collapseButton | the button that collapses the panel (mandatory when the panel is collapsible) |
.ais-Panel-collapseIcon | the icon in the button that collapses the panel (mandatory when the panel is collapsible) |
Note: this is a guideline for new InstantSearch flavours, not a rule.
| name | default value | description |
|---|---|---|
header | | Text to put before the widget |
footer | | Text to put after the widget |
hidden | | Function that is called on each render to determine if the panel has to be hidden. It returns a boolean based on the render options. The returned boolean determine if the panel is hidden. |
collapsed | | Function that makes the panel collapsible when defined. It returns a boolean based on the render options. The returned boolean determine if the panel is collapsed. Once the user interacts with the collapse button, this function isn't taken into account anymore. |
Note: there are no translations for this widget