Popover
Open a small panel of options beside a button while keeping the rest of the page available. Built on it: Menu.
<script setup lang="ts">import { ref } from 'vue'import { UiPopover, UiButton, UiField, UiInput } from 'grani' const note = ref('')</script> <template> <!-- A few controls about the page, live as they change: a filter is UiFilter, columns UiTableColumns. --> <UiPopover align="center"> <template #trigger> <UiButton variant="outline">Note</UiButton> </template> <UiField label="Note"> <UiInput v-model="note" /> </UiField> <template #footer="{ close }"> <UiButton variant="secondary" size="xs" :disabled="!note" @click="note = ''" >Clear</UiButton > <UiButton size="xs" @click="close">Done</UiButton> </template> </UiPopover></template>
Also called dropdown panel, flyout, popup.
Usage
<UiPopover>…</UiPopover> With GraniResolver in the Vite config, a template needs no import: set it up once.
API
| Name · type | Default | Description |
|---|---|---|
| alignstart | center | end= "start" | "start" | Which edge of the button the panel lines up with; start and end follow the reading direction. |
| anchorHTMLElement | null= null | null | The element the panel lines up with, when the button sits inside a wider one (a field's capsule). |
| labelledbystring= "" | "" | The id of what names the panel, when the button's text is not its name (a field's label). |
| openboolean= false | false | Whether the panel is open (v-model:open): the host learns of every close and can open it from outside. |
Attributes are placed by the component itself: its description says where.
When to use another component
| When you need | Take |
|---|---|
| Commands | Menu |
| A task that needs the whole attention | Modal |
| A record to edit | Crud drawer |
| A hint of text alone | Tooltip |