馃帀 Try the public beta of the new docs site at algolia.com/doc-beta! 馃帀
UI libraries / Vue InstantSearch / Widgets

ais-panel

Signature 
<ais-panel
  // Optional parameters
  :class-names="object"
/>
Import
Copy 
1
2
3
4
5
6
7
8
9

import { AisPanel } from 'vue-instantsearch';
// Use 'vue-instantsearch/vue3/es' for Vue 3

export default {
  components: {
    AisPanel
  },
  // ...
};

1. Follow additional steps in Optimize build size to ensure your code is correctly bundled.
2. This imports all the widgets, even the ones you don鈥檛 use. Read the Getting started guide for more information.

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

Parameter Description
class-names
type: object
default: {}
Optional

The CSS classes you can 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

Parameter Description
default

The slot to provide a body to the widget.

Note that when you implement this slot, none of the other slots will change the output, as the default slot surrounds them.

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 v-slot:default="{ 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 v-slot:header="{ hasRefinements }">
    <p>Brand <span v-if="!hasRefinements">(no results)</span></p>
  </template>
  <template v-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 v-slot:default>
    <ais-refinement-list attribute="brand" />
  </template>
  <template v-slot:footer="{ 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 v4