20260720172840
This commit is contained in:
oneao committed
1 parent
cda7f16d3a
commit
94207c77ff
3117 files changed
+201407
-1236
No files matched your search
@@ -0,0 +1,45 @@
|
||||
# _semantic
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import { SemanticPreview } from '@/components/semantic'
|
||||
import { useComponentLocale } from '@/composables/use-locale'
|
||||
import { locales } from '../locales'
|
||||
|
||||
const { t } = useComponentLocale(locales)
|
||||
|
||||
const semantics = computed(() => [
|
||||
{ name: 'root', desc: t('root') },
|
||||
{ name: 'container', desc: t('container') },
|
||||
{ name: 'title', desc: t('title') },
|
||||
{ name: 'content', desc: t('content') },
|
||||
{ name: 'arrow', desc: t('arrow') },
|
||||
])
|
||||
|
||||
const divRef = ref<HTMLDivElement | null>(null)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<SemanticPreview
|
||||
component-name="Popover"
|
||||
:semantics="semantics"
|
||||
>
|
||||
<template #default="{ classes }">
|
||||
<div ref="divRef" :style="{ position: 'absolute', marginTop: '60px' }">
|
||||
<a-popover
|
||||
open
|
||||
placement="top"
|
||||
title="Hello"
|
||||
content="Ant Design love you!"
|
||||
:auto-adjust-overflow="false"
|
||||
:get-popup-container="() => divRef!"
|
||||
:classes="classes"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</SemanticPreview>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,90 @@
|
||||
# Arrow
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Hide arrow by `arrow`.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import type { PopoverProps } from 'antdv-next'
|
||||
import { computed, h, shallowRef } from 'vue'
|
||||
|
||||
const buttonWidth = shallowRef(80)
|
||||
const arrow = shallowRef<'Show' | 'Hide' | 'Center'>('Show')
|
||||
const mergedArrow = computed<PopoverProps['arrow']>(() => {
|
||||
if (arrow.value === 'Hide') {
|
||||
return false
|
||||
}
|
||||
if (arrow.value === 'Show') {
|
||||
return true
|
||||
}
|
||||
return { pointAtCenter: true }
|
||||
})
|
||||
|
||||
const title = 'Title'
|
||||
const content = h('div', [
|
||||
h('p', 'Content'),
|
||||
h('p', 'Content'),
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-config-provider :button="{ style: { width: `${buttonWidth}px`, margin: '4px' } }">
|
||||
<a-segmented
|
||||
v-model:value="arrow"
|
||||
:options="['Show', 'Hide', 'Center']"
|
||||
style="margin-bottom: 24px"
|
||||
/>
|
||||
<a-flex vertical justify="center" align="center" class="demo">
|
||||
<a-flex justify="center" align="center" style="white-space: nowrap">
|
||||
<a-popover placement="topLeft" :title="title" :content="content" :arrow="mergedArrow">
|
||||
<a-button>TL</a-button>
|
||||
</a-popover>
|
||||
<a-popover placement="top" :title="title" :content="content" :arrow="mergedArrow">
|
||||
<a-button>Top</a-button>
|
||||
</a-popover>
|
||||
<a-popover placement="topRight" :title="title" :content="content" :arrow="mergedArrow">
|
||||
<a-button>TR</a-button>
|
||||
</a-popover>
|
||||
</a-flex>
|
||||
<a-flex :style="{ width: `${buttonWidth * 5 + 32}px` }" justify="space-between" align="center">
|
||||
<a-flex align="center" vertical>
|
||||
<a-popover placement="leftTop" :title="title" :content="content" :arrow="mergedArrow">
|
||||
<a-button>LT</a-button>
|
||||
</a-popover>
|
||||
<a-popover placement="left" :title="title" :content="content" :arrow="mergedArrow">
|
||||
<a-button>Left</a-button>
|
||||
</a-popover>
|
||||
<a-popover placement="leftBottom" :title="title" :content="content" :arrow="mergedArrow">
|
||||
<a-button>LB</a-button>
|
||||
</a-popover>
|
||||
</a-flex>
|
||||
<a-flex align="center" vertical>
|
||||
<a-popover placement="rightTop" :title="title" :content="content" :arrow="mergedArrow">
|
||||
<a-button>RT</a-button>
|
||||
</a-popover>
|
||||
<a-popover placement="right" :title="title" :content="content" :arrow="mergedArrow">
|
||||
<a-button>Right</a-button>
|
||||
</a-popover>
|
||||
<a-popover placement="rightBottom" :title="title" :content="content" :arrow="mergedArrow">
|
||||
<a-button>RB</a-button>
|
||||
</a-popover>
|
||||
</a-flex>
|
||||
</a-flex>
|
||||
<a-flex justify="center" align="center" style="white-space: nowrap">
|
||||
<a-popover placement="bottomLeft" :title="title" :content="content" :arrow="mergedArrow">
|
||||
<a-button>BL</a-button>
|
||||
</a-popover>
|
||||
<a-popover placement="bottom" :title="title" :content="content" :arrow="mergedArrow">
|
||||
<a-button>Bottom</a-button>
|
||||
</a-popover>
|
||||
<a-popover placement="bottomRight" :title="title" :content="content" :arrow="mergedArrow">
|
||||
<a-button>BR</a-button>
|
||||
</a-popover>
|
||||
</a-flex>
|
||||
</a-flex>
|
||||
</a-config-provider>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,29 @@
|
||||
# Basic
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
The most basic example. The size of the floating layer depends on the contents region.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<a-popover title="Title">
|
||||
<template #content>
|
||||
<div>
|
||||
<p>Content</p>
|
||||
<p>Content</p>
|
||||
</div>
|
||||
</template>
|
||||
<a-button type="primary">
|
||||
Hover me
|
||||
</a-button>
|
||||
</a-popover>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
:global(.ant-popover-content p) {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
@@ -0,0 +1,30 @@
|
||||
# Controlling the close of the dialog
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Use `open` prop to control the display of the card.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const open = ref(false)
|
||||
|
||||
function hide() {
|
||||
open.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-popover v-model:open="open" title="Title" trigger="click">
|
||||
<template #content>
|
||||
<a href="" @click.prevent="hide">Close</a>
|
||||
</template>
|
||||
<a-button type="primary">
|
||||
Click me
|
||||
</a-button>
|
||||
</a-popover>
|
||||
</template>
|
||||
```
|
||||
+63
@@ -0,0 +1,63 @@
|
||||
# Hover with click popover
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
The following example shows how to create a popover which can be hovered and clicked.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const clicked = ref(false)
|
||||
const hovered = ref(false)
|
||||
|
||||
function hide() {
|
||||
clicked.value = false
|
||||
hovered.value = false
|
||||
}
|
||||
|
||||
function handleHoverChange(value: boolean) {
|
||||
hovered.value = value
|
||||
if (value) {
|
||||
clicked.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handleClickChange(value: boolean) {
|
||||
clicked.value = value
|
||||
if (value) {
|
||||
hovered.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-popover
|
||||
title="Hover title"
|
||||
trigger="hover"
|
||||
:open="hovered"
|
||||
:style="{ width: '500px' }"
|
||||
@open-change="handleHoverChange"
|
||||
>
|
||||
<template #content>
|
||||
<div>This is hover content.</div>
|
||||
</template>
|
||||
<a-popover
|
||||
title="Click title"
|
||||
trigger="click"
|
||||
:open="clicked"
|
||||
@open-change="handleClickChange"
|
||||
>
|
||||
<template #content>
|
||||
<div>
|
||||
This is click content.
|
||||
<a href="" @click.prevent="hide">Close</a>
|
||||
</div>
|
||||
</template>
|
||||
<a-button>Hover and click</a-button>
|
||||
</a-popover>
|
||||
</a-popover>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,73 @@
|
||||
# Placement
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
There are 12 `placement` options available.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { h } from 'vue'
|
||||
|
||||
const title = 'Title'
|
||||
const content = h('div', [
|
||||
h('p', 'Content'),
|
||||
h('p', 'Content'),
|
||||
])
|
||||
const buttonWidth = 80
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-config-provider :button="{ style: { width: `${buttonWidth}px`, margin: '4px' } }">
|
||||
<a-flex vertical justify="center" align="center" class="demo">
|
||||
<a-flex justify="center" align="center" style="white-space: nowrap">
|
||||
<a-popover placement="topLeft" :title="title" :content="content">
|
||||
<a-button>TL</a-button>
|
||||
</a-popover>
|
||||
<a-popover placement="top" :title="title" :content="content">
|
||||
<a-button>Top</a-button>
|
||||
</a-popover>
|
||||
<a-popover placement="topRight" :title="title" :content="content">
|
||||
<a-button>TR</a-button>
|
||||
</a-popover>
|
||||
</a-flex>
|
||||
<a-flex :style="{ width: `${buttonWidth * 5 + 32}px` }" justify="space-between" align="center">
|
||||
<a-flex align="center" vertical>
|
||||
<a-popover placement="leftTop" :title="title" :content="content">
|
||||
<a-button>LT</a-button>
|
||||
</a-popover>
|
||||
<a-popover placement="left" :title="title" :content="content">
|
||||
<a-button>Left</a-button>
|
||||
</a-popover>
|
||||
<a-popover placement="leftBottom" :title="title" :content="content">
|
||||
<a-button>LB</a-button>
|
||||
</a-popover>
|
||||
</a-flex>
|
||||
<a-flex align="center" vertical>
|
||||
<a-popover placement="rightTop" :title="title" :content="content">
|
||||
<a-button>RT</a-button>
|
||||
</a-popover>
|
||||
<a-popover placement="right" :title="title" :content="content">
|
||||
<a-button>Right</a-button>
|
||||
</a-popover>
|
||||
<a-popover placement="rightBottom" :title="title" :content="content">
|
||||
<a-button>RB</a-button>
|
||||
</a-popover>
|
||||
</a-flex>
|
||||
</a-flex>
|
||||
<a-flex justify="center" align="center" style="white-space: nowrap">
|
||||
<a-popover placement="bottomLeft" :title="title" :content="content">
|
||||
<a-button>BL</a-button>
|
||||
</a-popover>
|
||||
<a-popover placement="bottom" :title="title" :content="content">
|
||||
<a-button>Bottom</a-button>
|
||||
</a-popover>
|
||||
<a-popover placement="bottomRight" :title="title" :content="content">
|
||||
<a-button>BR</a-button>
|
||||
</a-popover>
|
||||
</a-flex>
|
||||
</a-flex>
|
||||
</a-config-provider>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,36 @@
|
||||
# Auto Shift
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Auto adjust Popup and arrow position when Popover is close to the edge of the screen. Will be out of screen when exceed limitation.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue'
|
||||
|
||||
const open = ref(false)
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
document.documentElement.scrollTop = document.documentElement.clientHeight
|
||||
document.documentElement.scrollLeft = document.documentElement.clientWidth
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
open.value = true
|
||||
})
|
||||
}, 10)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="h-300vh w-300vw flex items-center justify-center">
|
||||
<a-popover content="Thanks for using antd. Have a nice day !" :open="open">
|
||||
<a-button type="primary">
|
||||
Scroll The Window
|
||||
</a-button>
|
||||
</a-popover>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,80 @@
|
||||
# Custom semantic dom styling
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import type { PopoverProps } from 'antdv-next'
|
||||
import { theme } from 'antdv-next'
|
||||
|
||||
const { token } = theme.useToken()
|
||||
|
||||
const classes: PopoverProps['classes'] = {
|
||||
container: 'demo-popover-container',
|
||||
}
|
||||
|
||||
const stylesObject: PopoverProps['styles'] = {
|
||||
container: {
|
||||
backgroundColor: '#eee',
|
||||
boxShadow: 'inset 5px 5px 3px #fff, inset -5px -5px 3px #ddd, 0 0 3px rgba(0,0,0,0.2)',
|
||||
},
|
||||
title: {
|
||||
color: '#262626',
|
||||
},
|
||||
content: {
|
||||
color: '#262626',
|
||||
},
|
||||
}
|
||||
|
||||
const stylesFn: PopoverProps['styles'] = (info) => {
|
||||
if (info?.props?.arrow === false) {
|
||||
return {
|
||||
container: {
|
||||
backgroundColor: 'rgba(53, 71, 125, 0.8)',
|
||||
padding: '12px',
|
||||
borderRadius: '4px',
|
||||
},
|
||||
title: {
|
||||
color: '#fff',
|
||||
},
|
||||
content: {
|
||||
color: '#fff',
|
||||
},
|
||||
}
|
||||
}
|
||||
return {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-flex gap="middle">
|
||||
<a-popover
|
||||
content="Object text"
|
||||
:classes="classes"
|
||||
:styles="stylesObject"
|
||||
:arrow="false"
|
||||
>
|
||||
<a-button>Object Style</a-button>
|
||||
</a-popover>
|
||||
<a-popover
|
||||
content="Function text"
|
||||
:classes="classes"
|
||||
:styles="stylesFn"
|
||||
:arrow="false"
|
||||
>
|
||||
<a-button type="primary">
|
||||
Function Style
|
||||
</a-button>
|
||||
</a-popover>
|
||||
</a-flex>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.demo-popover-container {
|
||||
padding: v-bind('`${token.paddingXS}px`');
|
||||
border: 1px dashed v-bind('token.colorBorder');
|
||||
}
|
||||
</style>
|
||||
```
|
||||
@@ -0,0 +1,41 @@
|
||||
# Three ways to trigger
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Mouse to click, focus and move in.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<a-space wrap>
|
||||
<a-popover title="Title" trigger="hover">
|
||||
<template #content>
|
||||
<div>
|
||||
<p>Content</p>
|
||||
<p>Content</p>
|
||||
</div>
|
||||
</template>
|
||||
<a-button>Hover me</a-button>
|
||||
</a-popover>
|
||||
<a-popover title="Title" trigger="focus">
|
||||
<template #content>
|
||||
<div>
|
||||
<p>Content</p>
|
||||
<p>Content</p>
|
||||
</div>
|
||||
</template>
|
||||
<a-button>Focus me</a-button>
|
||||
</a-popover>
|
||||
<a-popover title="Title" trigger="click">
|
||||
<template #content>
|
||||
<div>
|
||||
<p>Content</p>
|
||||
<p>Content</p>
|
||||
</div>
|
||||
</template>
|
||||
<a-button>Click me</a-button>
|
||||
</a-popover>
|
||||
</a-space>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,65 @@
|
||||
---
|
||||
title: Popover
|
||||
description: The floating card pops up when clicking/mouse hovering over an element.
|
||||
---
|
||||
|
||||
## When To Use
|
||||
|
||||
A simple popup card to provide extra information or operations.
|
||||
|
||||
Comparing with `Tooltip`, besides information `Popover` card can also provide action elements like links and buttons.
|
||||
|
||||
## Examples
|
||||
|
||||
## Demos
|
||||
|
||||
| Demo | Path |
|
||||
| --- | --- |
|
||||
| Basic | demo/basic.md |
|
||||
| Three ways to trigger | demo/trigger-type.md |
|
||||
| Placement | demo/placement.md |
|
||||
| Arrow | demo/arrow.md |
|
||||
| Auto Shift | demo/shift.md |
|
||||
| Controlling the close of the dialog | demo/control.md |
|
||||
| Hover with click popover | demo/hover-with-click.md |
|
||||
| Custom semantic dom styling | demo/style-class.md |
|
||||
|
||||
## API
|
||||
|
||||
Common props ref：[Common props](../../docs/vue/common-props.md)
|
||||
|
||||
### Props
|
||||
|
||||
| Property | Description | Type | Default | Version | [Global Config](../config-provider/docs.md#component-config) |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| title | Title of the card | VueNode | - | - | × |
|
||||
| content | Content of the card | VueNode | - | - | × |
|
||||
| classes | Customize class for each semantic structure inside the component. Supports object or function | PopoverClassNamesType | - | - | ✓ |
|
||||
| styles | Customize inline style for each semantic structure inside the component. Supports object or function | PopoverStylesType | - | - | ✓ |
|
||||
|
||||
Popover also supports all Tooltip props. See [Tooltip](../tooltip/docs.md#api).
|
||||
|
||||
### Events
|
||||
|
||||
| Event | Description | Type | Version |
|
||||
| --- | --- | --- | --- |
|
||||
| openChange | Callback when popover visibility changes | (open: boolean, e?: MouseEvent \| KeyboardEvent) => void | - |
|
||||
|
||||
### Slots
|
||||
|
||||
| Slot | Description | Type | Version |
|
||||
| --- | --- | --- | --- |
|
||||
| title | Title of the card | () => any | - |
|
||||
| content | Content of the card | () => any | - |
|
||||
|
||||
## Note
|
||||
|
||||
Please ensure that the child node of `Popover` can accept `mouseenter`, `mouseleave`, `focus`, `click` events.
|
||||
|
||||
## Semantic DOM
|
||||
|
||||
| _semantic | demo/_semantic.md |
|
||||
|
||||
## FAQ
|
||||
|
||||
For more questions, please refer to [Tooltip FAQ](../tooltip/docs.md#faq).
|
||||
@@ -0,0 +1,27 @@
|
||||
# popover Token
|
||||
|
||||
Use these variables through `theme.components.Popover`. This document lists definitions only and does not include values.
|
||||
|
||||
```vue
|
||||
<a-config-provider
|
||||
:theme="{
|
||||
token: {
|
||||
// Global token configuration
|
||||
},
|
||||
components: {
|
||||
Popover: {
|
||||
// Token name: value
|
||||
},
|
||||
},
|
||||
}"
|
||||
>
|
||||
...
|
||||
</a-config-provider>
|
||||
```
|
||||
|
||||
## Token List
|
||||
|
||||
| Token | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| `titleMinWidth` | `string \| number` | Min width of Popover title |
|
||||
| `zIndexPopup` | `number` | z-index of Popover |
|
||||
Reference in new issue
Block a user