u
This commit is contained in:
1 parent
e99a9fb274
commit
0be0b0767a
788 files changed
+112023
-14941
No files matched your search
@@ -7,17 +7,17 @@ import { G3Button, G3Popover, G3Space } from '@g3soft/ui'
|
||||
<G3Space direction="vertical" :size="40" style="display: flex; align-items: center; padding: 60px 20px">
|
||||
<G3Popover :arrow="false" placement="bottom">
|
||||
<template #trigger><G3Button type="outline">无箭头</G3Button></template>
|
||||
<template #content>arrow=false 时没有尖角,适合菜单类浮层</template>
|
||||
<template #content>浮层内容</template>
|
||||
</G3Popover>
|
||||
|
||||
<div style="width: 320px">
|
||||
<G3Popover follow-trigger-width placement="bottom-start">
|
||||
<template #trigger>
|
||||
<div style="padding: 8px 12px; border: 1px solid #d9d9d9; border-radius: 6px">
|
||||
触发器(320px 宽)
|
||||
触发器
|
||||
</div>
|
||||
</template>
|
||||
<template #content>浮层宽度跟随触发器,内容更长时会自动变宽</template>
|
||||
<template #content>浮层内容</template>
|
||||
</G3Popover>
|
||||
</div>
|
||||
</G3Space>
|
||||
|
||||
@@ -9,9 +9,7 @@ import { G3Button, G3Popover } from '@g3soft/ui'
|
||||
<G3Button type="outline">点击查看</G3Button>
|
||||
</template>
|
||||
<template #content>
|
||||
<div style="max-width: 220px">
|
||||
浮层内容可以直接写 HTML,也可以放任意组件。
|
||||
</div>
|
||||
<div style="max-width: 220px">浮层内容</div>
|
||||
</template>
|
||||
</G3Popover>
|
||||
</template>
|
||||
@@ -18,7 +18,6 @@ function onOpenChange(value: boolean) {
|
||||
</template>
|
||||
<template #content>
|
||||
<div style="max-width: 200px">
|
||||
<p style="margin: 0 0 8px">受控模式下,所有开关都经过 update:open。</p>
|
||||
<G3Button size="small" @click="open = false">知道了</G3Button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -13,9 +13,9 @@ const options = ['top', 'bottom', 'left', 'right', 'top-start', 'bottom-end']
|
||||
|
||||
<G3Popover :placement="placement" :offset="12">
|
||||
<template #trigger>
|
||||
<G3Button type="outline">方位:{{ placement }}</G3Button>
|
||||
<G3Button type="outline">打开气泡</G3Button>
|
||||
</template>
|
||||
<template #content>当前方位 {{ placement }},贴边时会自动翻到对面</template>
|
||||
<template #content>气泡内容</template>
|
||||
</G3Popover>
|
||||
</div>
|
||||
</template>
|
||||
@@ -10,12 +10,12 @@ const manualOpen = ref(false)
|
||||
<G3Space :size="[16, 12]" align="center" wrap>
|
||||
<G3Popover trigger="hover">
|
||||
<template #trigger><G3Button type="outline">hover 触发</G3Button></template>
|
||||
<template #content>鼠标移入即显示,移出后延迟关闭</template>
|
||||
<template #content>浮层内容</template>
|
||||
</G3Popover>
|
||||
|
||||
<G3Popover trigger="focus">
|
||||
<template #trigger><G3Button type="outline">focus 触发</G3Button></template>
|
||||
<template #content>Tab 聚焦时显示,焦点移出关闭</template>
|
||||
<template #content>浮层内容</template>
|
||||
</G3Popover>
|
||||
|
||||
<G3Popover trigger="contextmenu">
|
||||
@@ -24,7 +24,7 @@ const manualOpen = ref(false)
|
||||
在此处右键
|
||||
</div>
|
||||
</template>
|
||||
<template #content>在鼠标位置弹出,超出视口会自动回退</template>
|
||||
<template #content>浮层内容</template>
|
||||
</G3Popover>
|
||||
|
||||
<!-- manual:开关完全由业务控制 -->
|
||||
|
||||
Reference in new issue
Block a user