API Reference / Angular InstantSearch Widgets / ais-panel
Aug. 23, 2019

You are reading the documentation for Angular InstantSearch v3, which is in beta. You can find the v2 documentation here.

Widget signature
<ais-panel
  // Optional parameters
  header="string"
  footer="string"
></ais-panel>

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 no longer can refine, for example, when a refinementList becomes empty because of the current search results.

Examples

1
2
3
4
5
6
<ais-panel
  header="Header of the widget"
  footer="Footer of the widget"
>
  <!-- a widget -->
</ais-panel>

Props

header
type: string

Displays text before the wrapped element

1
2
3
<ais-panel
  header="Header of the widget"
></ais-panel>
type: string

Displays text after the wrapped element

1
2
3
<ais-panel
  footer="Footer of the widget"
></ais-panel>

Did you find this page helpful?