Play UIPopover New
New
A simple and compact dialog of an action.
Usage
title | content
Set popover title content.
<template>
<div class="flex gap-2">
<PlPopover
title="Popover Title"
content="This is popover content!"
>
<template #reference>
<PlButton>
props method
</PlButton>
</template>
</PlPopover>
<PlPopover>
<template #reference>
<PlButton>
default slot method
</PlButton>
</template>
<template #default>
This is popover!
</template>
</PlPopover>
</div>
</template>
<script setup lang="ts">
</script><template>
<div class="flex gap-2">
<PlPopover
title="Popover Title"
content="This is popover content!"
>
<template #reference>
<PlButton>
props method
</PlButton>
</template>
</PlPopover>
<PlPopover>
<template #reference>
<PlButton>
default slot method
</PlButton>
</template>
<template #default>
This is popover!
</template>
</PlPopover>
</div>
</template>
<script setup lang="ts">
</script>trigger
Set popover trigger methods.
<template>
<div class="flex gap-2">
<PlPopover
title="Popover Title"
content="This is popover content!"
>
<template #reference>
<PlButton>
hover
</PlButton>
</template>
</PlPopover>
<PlPopover
trigger="click"
title="Popover Title"
content="This is popover content!"
>
<template #reference>
<PlButton>
click
</PlButton>
</template>
</PlPopover>
<PlPopover
:trigger="trigger"
title="Popover Title"
content="This is popover content!"
>
<template #reference>
<PlButton @click="handleClick">
boolean
</PlButton>
</template>
</PlPopover>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const trigger = ref(false)
const handleClick = () => {
trigger.value = !trigger.value
}
</script><template>
<div class="flex gap-2">
<PlPopover
title="Popover Title"
content="This is popover content!"
>
<template #reference>
<PlButton>
hover
</PlButton>
</template>
</PlPopover>
<PlPopover
trigger="click"
title="Popover Title"
content="This is popover content!"
>
<template #reference>
<PlButton>
click
</PlButton>
</template>
</PlPopover>
<PlPopover
:trigger="trigger"
title="Popover Title"
content="This is popover content!"
>
<template #reference>
<PlButton @click="handleClick">
boolean
</PlButton>
</template>
</PlPopover>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const trigger = ref(false)
const handleClick = () => {
trigger.value = !trigger.value
}
</script>placement
Set popover placement.
<template>
<div class="flex gap-2">
<PlPopover
placement="top"
title="Popover Title"
content="This is popover content!"
>
<template #reference>
<PlButton>
top
</PlButton>
</template>
</PlPopover>
<PlPopover
placement="right"
title="Popover Title"
content="This is popover content!"
>
<template #reference>
<PlButton>
right
</PlButton>
</template>
</PlPopover>
<PlPopover
placement="bottom"
title="Popover Title"
content="This is popover content!"
>
<template #reference>
<PlButton>
bottom
</PlButton>
</template>
</PlPopover>
<PlPopover
placement="left"
title="Popover Title"
content="This is popover content!"
>
<template #reference>
<PlButton>
left
</PlButton>
</template>
</PlPopover>
</div>
</template>
<script setup lang="ts">
</script><template>
<div class="flex gap-2">
<PlPopover
placement="top"
title="Popover Title"
content="This is popover content!"
>
<template #reference>
<PlButton>
top
</PlButton>
</template>
</PlPopover>
<PlPopover
placement="right"
title="Popover Title"
content="This is popover content!"
>
<template #reference>
<PlButton>
right
</PlButton>
</template>
</PlPopover>
<PlPopover
placement="bottom"
title="Popover Title"
content="This is popover content!"
>
<template #reference>
<PlButton>
bottom
</PlButton>
</template>
</PlPopover>
<PlPopover
placement="left"
title="Popover Title"
content="This is popover content!"
>
<template #reference>
<PlButton>
left
</PlButton>
</template>
</PlPopover>
</div>
</template>
<script setup lang="ts">
</script>headless
Custom popover.
<template>
<PlPopover
title="Popover Title"
content="This is popover content!"
>
<template #reference>
<PlButton>
popover
</PlButton>
</template>
<template #headless>
<div class="text-white bg-red">
This is custom popover!
</div>
</template>
</PlPopover>
</template>
<script setup lang="ts">
</script><template>
<PlPopover
title="Popover Title"
content="This is popover content!"
>
<template #reference>
<PlButton>
popover
</PlButton>
</template>
<template #headless>
<div class="text-white bg-red">
This is custom popover!
</div>
</template>
</PlPopover>
</template>
<script setup lang="ts">
</script>Props
| Name | Type | Default | Description |
|---|---|---|---|
| title | string | '' | set popover title. |
| content | string | '' | set popover content. |
| placement | <'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end'>[] | 'right' | set popover placement. |
| trigger | hover' | 'click' | boolean | 'hover' | set popover trigger methods. |
Slots
| Name | Parameters | Description |
|---|---|---|
| default | () | Popover's content. |
| headless | () | Custom Popover. |