API Reference / Angular InstantSearch Widgets / ais-panel

ais-panel

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>
See code examples

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

Copy 
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
Copy 
1
2
3

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

Displays text after the wrapped element
Copy 
1
2
3

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

Did you find this page helpful?

Angular InstantSearch v3