Components
<AisPanel>
Layout wrapper around another widget with header/body/footer slots.
AisPanel is useful to decorate refinement widgets while exposing hasRefinements to header/footer slots.
Usage
<AisPanel component="refinementList" attribute="brand">
<template #header="{ hasRefinements }">
Brand {{ hasRefinements ? 'active' : 'inactive' }}
</template>
<AisRefinementList attribute="brand" />
<template #footer>
Optional footer content
</template>
</AisPanel>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
component | keyof RenderState['string'] | undefined | Connector family used to resolve panel refinement state. |
attribute | string | required | Attribute used to compute hasRefinements. |
Slots
| Slot | Slot props | Description |
|---|---|---|
default | { hasRefinements } | Panel body content (usually a refinement widget). |
header | { hasRefinements } | Header content, useful for state badges/titles. |
footer | { hasRefinements } | Footer actions conditional on refinement state. |
End-to-end example
<AisPanel component="refinementList" attribute="brand">
<template #header="{ hasRefinements }">
<div>
Brand filters
<span v-if="hasRefinements">(active)</span>
</div>
</template>
<AisRefinementList attribute="brand" searchable />
<template #footer="{ hasRefinements }">
<AisClearRefinements v-if="hasRefinements" />
<span v-else>Pick at least one brand to refine results.</span>
</template>
</AisPanel>