API Reference / Vue InstantSearch Widgets / ais-panel

ais-panel

Widget signature 
<ais-panel
  // Optional parameters
  :class-names="object"
/>
See code examples
See Live example

About this widget

The ais-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. An example is when a ais-refinement-list becomes empty because of the current search results.

Examples

Copy 
1
2
3

<ais-panel>
  <p>Panel content</p>
</ais-panel>

Props

class-names
type: object
default: {}
Optional

The CSS classes to override.

  • ais-Panel: the root of the widget.
  • ais-Panel--noRefinement: the root of the widget without refinement.
  • ais-Panel-header: the header of the widget.
  • ais-Panel-body: the content of the widget.
  • ais-Panel-footer: the footer of the widget.
Copy 
1
2
3
4
5
6
7
8
9

<ais-panel
  :class-names="{
    'ais-Panel': 'MyCustomPanel',
    'ais-Panel-body': 'MyCustomPanelBody',
    // ...
  }"
>
  <p>Panel content</p>
</ais-panel>

Customize the UI

default

The slot to provide a body to the widget.

Scope

  • hasRefinements: boolean: indicates whether the inner widget can refine, will be false if it has no possible refinements.
Copy 
1
2
3
4
5
6

<ais-panel>
  <template slot="default" slot-scope="{ hasRefinements }">
    <p v-if="!hasRefinements">no results</p>
    <ais-refinement-list attribute="brand" />
  </template>
</ais-panel>
header

The slot to provide a header to the widget.

Scope

  • hasRefinements: boolean: indicates whether the inner widget can refine, will be false if it has no possible refinements.
Copy 
1
2
3
4
5
6
7
8

<ais-panel>
  <template slot="header" slot-scope="{ hasRefinements }">
    <p>Brand <span v-if="!hasRefinements">(no results)</span></p>
  </template>
  <template slot="default">
    <ais-refinement-list attribute="brand" />
  </template>
</ais-panel>

The slot to provide a footer to the widget.

Scope

  • hasRefinements: boolean: indicates whether the inner widget can refine, will be false if it has no possible refinements.
Copy 
1
2
3
4
5
6
7
8

<ais-panel>
  <template slot="default">
    <ais-refinement-list attribute="brand" />
  </template>
  <template slot="footer" slot-scope="{ hasRefinements }">
    <p v-if="!hasRefinements">no results</p>
  </template>
</ais-panel>

HTML output

Copy 
1
2
3
4
5

<div class="ais-Panel">
  <div class="ais-Panel-header">Header</div>
  <div class="ais-Panel-body">Panel content</div>
  <div class="ais-Panel-footer">Footer</div>
</div>

Did you find this page helpful?

Vue InstantSearch v3