arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 20:19:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs(popover): add panel slot example

Browse Source 
Resolves #763
This commit is contained in:
Benjamin Canac
2023-10-03 14:54:58 +02:00
parent 25ab781c14
commit 498db5ca21
2 changed files with 33 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
docs/components/content/examples/PopoverExampleSlot.vue Normal file
View File

@@ -0,0 +1,11 @@
<template>
<UPopover>
<UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />
<template #panel="{ close }">
<div class="p-8">
<UButton label="Close" @click="close" />
</div>
</template>
</UPopover>
</template>

23
docs/content/6.overlays/3.popover.md
View File

@@ -14,6 +14,7 @@ links:
::component-example
#default
:popover-example
#code
```vue
<template>
@@ -53,7 +54,27 @@ Use the `mode` prop to switch between `click` and `hover` modes.
### `panel`
Use the `#panel` slot to fill the content of the panel.
Use the `#panel` slot to fill the content of the panel. You will have access to the `open` property and the `close` method in the slot scope.
::component-example
#default
:popover-example-slot
#code
```vue
<template>
<UPopover>
<UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />
<template #panel="{ close }">
<div class="p-8">
<UButton label="Close" @click="close" />
</div>
</template>
</UPopover>
</template>
```
::
## Props