<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