# Popover
# Example
import { popover } from 'vigour';
// popover.name === 'vigour-popover'
# Basic
By default, the appearance of a Popover needs to be triggered by a click and appears at the top of the content.
默认情况下, Popover 的出现需要通过点击触发,而且出现在内容的上方。
<vigour-popover>
<template v-slot:content>
<div>test</div>
</template>
<vigour-button>Click</vigour-button>
</vigour-popover>
# Positions
You can set the position where the Popover appears through the position
attribute. It can be set to 'top'
, 'left'
, 'bottom'
or 'right'
.
通过 position
属性可以设置 Popover 出现的位置。它可以设置为 'top'
, 'left'
, 'bottom'
或 'right'
。
<vigour-popover position="top">
<template v-slot:content>
<div>
test test test test test test test test test test test test test test
test test test test test test test
</div>
<div>test</div>
</template>
<vigour-button>Top</vigour-button>
</vigour-popover>
<vigour-popover position="bottom">
<template v-slot:content>
<div>
test test test test test test test test test test test test test test
test test test test test test test
</div>
<div>test</div>
</template>
<vigour-button>Bottom</vigour-button>
</vigour-popover>
<vigour-popover position="left">
<template v-slot:content>
<div>
test test test test test test test test test test test test test test
test test test test test test test
</div>
<div>test</div>
</template>
<vigour-button>Left</vigour-button>
</vigour-popover>
<vigour-popover position="right">
<template v-slot:content>
<div>
test test test test test test test test test test test test test test
test test test test test test test
</div>
<div>test</div>
</template>
<vigour-button>Right</vigour-button>
</vigour-popover>
# Trigger
You can set the trigger method for Popover to appear through the attribute trigger
. It can be set to 'hover'
, 'click'
. Its default value is 'click'
.
通过 trigger
属性可以设置让 Popover 出现的触发方式。它可以设置为 'hover'
, 'click'
。它的默认值为 'click'
。
<vigour-popover position="top" trigger="hover">
<template v-slot:content>
<div>
test test test test test test test test test test test test test test
test test test test test test test
</div>
<div>test</div>
</template>
<vigour-button>Top</vigour-button>
</vigour-popover>
<vigour-popover position="bottom" trigger="hover">
<template v-slot:content>
<div>
test test test test test test test test test test test test test test
test test test test test test test
</div>
<div>test</div>
</template>
<vigour-button>Bottom</vigour-button>
</vigour-popover>
<vigour-popover position="left" trigger="hover">
<template v-slot:content>
<div>
test test test test test test test test test test test test test test
test test test test test test test
</div>
<div>test</div>
</template>
<vigour-button>Left</vigour-button>
</vigour-popover>
<vigour-popover position="right" trigger="hover">
<template v-slot:content>
<div>
test test test test test test test test test test test test test test
test test test test test test test
</div>
<div>test</div>
</template>
<vigour-button>Right</vigour-button>
</vigour-popover>
# Slot Scope
You can get a function that can close Popover through the Slot Scope, provided by a named slot named content
.
通过名为 content
的命名插槽提供的 Slot Scope,你可以获取能够关闭 Popover 的函数。
<vigour-popover position="top">
<template v-slot:content="{ close }">
<div>test</div>
<vigour-button @click="close">close</vigour-button>
</template>
<vigour-button>Click</vigour-button>
</vigour-popover>
<vigour-popover position="top">
<template v-slot:content="slotProps">
<div>test</div>
<vigour-button @click="slotProps.close">close</vigour-button>
</template>
<vigour-button>Click</vigour-button>
</vigour-popover>
# Props
prop | type | default value | available value |
---|---|---|---|
position | string | 'top' | 'top', 'left', 'bottom', 'right' |
trigger | string | 'hover' | 'click', 'hover' |
← Tabs 标签页 Collapse 折叠 →