Popover

A small panel next to a button that holds a bit of content or a few controls, without leaving the page.

<script setup lang="ts">
import { FsButton, FsCheckbox, FsCheckboxGroup, FsPopover } from '@fivespark/ui'
import { ref } from 'vue'

const statussen = ref<string[]>(['verzonden'])
</script>

<template>
  <div class="min-h-72">
    <FsPopover title="Filters">
      <template #trigger="{ props }">
        <FsButton v-bind="props" label="Filters" trailing-icon="chevron-down" />
      </template>
      <FsCheckboxGroup v-model="statussen" aria-label="Status">
        <FsCheckbox value="concept" label="Concept" />
        <FsCheckbox value="verzonden" label="Verzonden" />
        <FsCheckbox value="geaccepteerd" label="Geaccepteerd" />
      </FsCheckboxGroup>
    </FsPopover>
  </div>
</template>

Usage

<script setup lang="ts">
import { FsButton, FsPopover } from '@fivespark/ui'
</script>

<template>
  <FsPopover title="Btw-tarief">
    <template #trigger="{ props }">
      <FsButton v-bind="props" label="Uitleg" />
    </template>
    Voor de meeste diensten is het tarief 21%.
  </FsPopover>
</template>

Bind the trigger's props on the button that opens it. title is required: it names the panel and is shown at its top. The panel opens below the trigger and flips when there is no room. For a list of commands use Dropdown menu; for a short hint on hover use Tooltip; for something that must block the page use Dialog.

Examples

Closing from inside

The default slot receives close, for a button that finishes the task, such as "Toepassen".

<script setup lang="ts">
import { FsButton, FsCheckbox, FsCheckboxGroup, FsPopover } from '@fivespark/ui'
import { ref } from 'vue'

const statussen = ref<string[]>(['concept'])
</script>

<template>
  <div class="min-h-80">
    <FsPopover title="Filter op status">
      <template #trigger="{ props }">
        <FsButton v-bind="props" label="Filter op status" trailing-icon="chevron-down" />
      </template>
      <template #default="{ close }">
        <div class="flex flex-col gap-3">
          <FsCheckboxGroup v-model="statussen" aria-label="Status">
            <FsCheckbox value="concept" label="Concept" />
            <FsCheckbox value="verzonden" label="Verzonden" />
          </FsCheckboxGroup>
          <div class="flex justify-end gap-2">
            <FsButton label="Wissen" variant="ghost" @click="statussen = []" />
            <FsButton label="Toepassen" variant="primary" @click="close" />
          </div>
        </div>
      </template>
    </FsPopover>
  </div>
</template>

Explanation

An icon-only button needs a label, which is its name.

<script setup lang="ts">
import { FsButton, FsPopover } from '@fivespark/ui'
</script>

<template>
  <div class="min-h-56">
    <FsPopover title="Btw-tarief">
      <template #trigger="{ props }">
        <FsButton v-bind="props" icon="info" label="Uitleg bij btw-tarief" variant="ghost" size="dense" />
      </template>
      Het tarief dat op de offerte staat. Voor de meeste diensten is dat 21%.
    </FsPopover>
  </div>
</template>

Controlled

v-model:open follows the popover however it closes, and opens it from script.

<script setup lang="ts">
import { FsButton, FsPopover } from '@fivespark/ui'
import { ref } from 'vue'

const open = ref(false)
</script>

<template>
  <div class="flex min-h-56 flex-wrap items-start gap-2">
    <FsPopover v-model:open="open" title="Offerte versturen">
      <template #trigger="{ props }">
        <FsButton v-bind="props" label="Versturen" />
      </template>
      De offerte gaat naar info@jansen-bouw.nl.
    </FsPopover>
    <FsButton label="Open vanuit script" variant="ghost" @click="open = true" />
  </div>
</template>

Keyboard

Key	Does
Enter, Space	Opens the popover from its button
Esc	Closes it and returns focus to the button
Tab	Moves through the content; leaving it closes the popover

API Reference

FsPopover

Prop	Type	Default	Description
title	string	required	Shown at the top, and names the popover for screen readers.
open	boolean	false	True while the popover shows. Set it to open or close the popover from script.

Event	Payload	Description
update:open	[value: boolean]	Sent with the new `open`, for `v-model:open`.

Slot	Props	Description
trigger	{ props: Record<string, unknown>; }	The button that opens it: bind `props` on it, `<FsButton v-bind="props" label="Filters" />`.
default	{ close: () => void; }	The content. `close()` closes the popover, for a button inside it.