ais-panel

Wraps other widgets in a panel for a consistent layout.

Signature

<ais-panel
  // Optional parameters
  :class-names="object"
/>

Import

Component

To ensure optimal bundle sizes, see Optimize build size.

Vue

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

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

Plugin

This imports all widgets, even the ones you don’t use. For more information, see Get started with Vue InstantSearch.

JavaScript

import Vue from "vue";
import InstantSearch from "vue-instantsearch";
// Use "vue-instantsearch/vue3/es" for Vue 3

Vue.use(InstantSearch);

See this widget in action

Preview this widget and its behavior.

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

Vue

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

Props

class-names · object · default: "{}"

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.

Vue

<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.

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. Whether the inner widget can refine, will be false if it has no possible refinements.

Vue

<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. Whether the inner widget can refine, will be false if it has no possible refinements.

Vue

<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>

footer

The slot to provide a footer to the widget.

Scope

• hasRefinements: boolean. Whether the inner widget can refine, will be false if it has no possible refinements.

Vue

<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

HTML

<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>