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

docs(ComponentExample): automatically read code (#789)

Browse Source
This commit is contained in:
KeJun
2023-10-09 16:44:47 +08:00
committed by GitHub
parent cf93d968af
commit fe348b48c6
35 changed files with 387 additions and 2925 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,44 +11,13 @@ links:
## Usage
::component-example
#default
:popover-example
#code
```vue
<template>
<UPopover>
<UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />
<template #panel>
<!-- Content -->
</template>
</UPopover>
</template>
```
::
:component-example{component="popover-example"}
### Mode
Use the `mode` prop to switch between `click` and `hover` modes.
::component-example
#default
:popover-example-mode
#code
```vue
<template>
<UPopover mode="hover">
<UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />
<template #panel>
<!-- Content -->
</template>
</UPopover>
</template>
```
::
:component-example{component="popover-example-mode"}
## Slots
@@ -56,25 +25,7 @@ Use the `mode` prop to switch between `click` and `hover` modes.
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>
```
::
:component-example{component="popover-example-slot"}
## Props