Skip to content

Commit

Permalink
docs(popover): add panel slot example
Browse files Browse the repository at this point in the history
Resolves #763
  • Loading branch information
benjamincanac committed Oct 3, 2023
1 parent d6412f9 commit c3e51b6
Show file tree
Hide file tree
Showing 2 changed files with 33 additions and 1 deletion.
11 changes: 11 additions & 0 deletions docs/components/content/examples/PopoverExampleSlot.vue
Original file line number Diff line number Diff line change
@@ -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 changes: 22 additions & 1 deletion docs/content/6.overlays/3.popover.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ links:
::component-example
#default
:popover-example

#code
```vue
<template>
Expand Down Expand Up @@ -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

Expand Down

1 comment on commit c3e51b6

@vercel
Copy link

@vercel vercel bot commented on c3e51b6 Oct 3, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

ui – ./

ui-nuxt-js.vercel.app
ui-git-dev-nuxt-js.vercel.app
ui.nuxt.com

Please sign in to comment.