-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Tooltip and Popover components
- Loading branch information
Showing
27 changed files
with
687 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
<script setup lang="ts"> | ||
import { Button, Popover } from '@lite-space/ui' | ||
</script> | ||
|
||
<template> | ||
<Popover title="测试Title"> | ||
<Button>Hover me</Button> | ||
<template #content> | ||
<div> | ||
<p>Content</p> | ||
<p>Content</p> | ||
</div> | ||
</template> | ||
</Popover> | ||
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
<script setup lang="ts"> | ||
import { Button, Popover } from '@lite-space/ui' | ||
</script> | ||
|
||
<template> | ||
<Popover title="测试Title" :offset="30"> | ||
<Button>Hover me</Button> | ||
<template #content> | ||
<div> | ||
<p>Content</p> | ||
<p>Content</p> | ||
</div> | ||
</template> | ||
</Popover> | ||
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,53 @@ | ||
<script setup lang="ts"> | ||
import { Button, Popover, Space } from '@lite-space/ui' | ||
const [DefineTemplate, ReuseTemplate] = createReusableTemplate() | ||
</script> | ||
|
||
<template> | ||
<DefineTemplate v-slot="{ placement, text }"> | ||
<Popover :placement="placement" title="测试Title"> | ||
<Button class="w-18"> | ||
{{ text }} | ||
</Button> | ||
<template #content> | ||
<div> | ||
<p>Content</p> | ||
<p>Content</p> | ||
</div> | ||
</template> | ||
</Popover> | ||
</DefineTemplate> | ||
<div px-6> | ||
<div ml-20> | ||
<Space> | ||
<ReuseTemplate placement="top-start" text="TL" /> | ||
<ReuseTemplate placement="top" text="Top" /> | ||
<ReuseTemplate placement="top-end" text="TR" /> | ||
</Space> | ||
</div> | ||
<div flex="~ items-center justify-between"> | ||
<div> | ||
<Space direction="vertical"> | ||
<ReuseTemplate placement="left-start" text="LT" /> | ||
<ReuseTemplate placement="left" text="Left" /> | ||
<ReuseTemplate placement="left-end" text="LB" /> | ||
</Space> | ||
</div> | ||
<div> | ||
<Space direction="vertical"> | ||
<ReuseTemplate placement="right-start" text="RT" /> | ||
<ReuseTemplate placement="right" text="Right" /> | ||
<ReuseTemplate placement="right-end" text="RB" /> | ||
</Space> | ||
</div> | ||
</div> | ||
<div ml-20> | ||
<Space> | ||
<ReuseTemplate placement="bottom-start" text="BL" /> | ||
<ReuseTemplate placement="bottom" text="Bottom" /> | ||
<ReuseTemplate placement="bottom-end" text="BR" /> | ||
</Space> | ||
</div> | ||
</div> | ||
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
<script setup lang="ts"> | ||
import { Tooltip } from '@lite-space/ui' | ||
</script> | ||
|
||
<template> | ||
<Tooltip content="prompt text"> | ||
<span class="text-sm">鼠标进入时将显示工具提示</span> | ||
</Tooltip> | ||
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
<script setup lang="ts"> | ||
import { Tooltip } from '@lite-space/ui' | ||
</script> | ||
|
||
<template> | ||
<Tooltip content="prompt text" :offset="10"> | ||
<span class="text-sm">鼠标进入时将显示工具提示</span> | ||
</Tooltip> | ||
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,86 @@ | ||
<script setup lang="ts"> | ||
import { Button, Space, Tooltip } from '@lite-space/ui' | ||
</script> | ||
|
||
<template> | ||
<div px-6> | ||
<div ml-20> | ||
<Space> | ||
<Tooltip placement="top-start" content="prompt text"> | ||
<Button class="w-18"> | ||
TL | ||
</Button> | ||
</Tooltip> | ||
<Tooltip placement="top" content="prompt text"> | ||
<Button class="w-18"> | ||
Top | ||
</Button> | ||
</Tooltip> | ||
<Tooltip placement="top-end" content="prompt text"> | ||
<Button class="w-18"> | ||
TR | ||
</Button> | ||
</Tooltip> | ||
</Space> | ||
</div> | ||
<div flex="~ items-center justify-between"> | ||
<div> | ||
<Space direction="vertical"> | ||
<Tooltip placement="left-start" content="prompt text"> | ||
<Button class="w-18"> | ||
LT | ||
</Button> | ||
</Tooltip> | ||
<Tooltip placement="left" content="prompt text"> | ||
<Button class="w-18"> | ||
Left | ||
</Button> | ||
</Tooltip> | ||
<Tooltip placement="left-end" content="prompt text"> | ||
<Button class="w-18"> | ||
LB | ||
</Button> | ||
</Tooltip> | ||
</Space> | ||
</div> | ||
<div> | ||
<Space direction="vertical"> | ||
<Tooltip placement="right-start" content="prompt text"> | ||
<Button class="w-18"> | ||
RT | ||
</Button> | ||
</Tooltip> | ||
<Tooltip placement="right" content="prompt text"> | ||
<Button class="w-18"> | ||
Right | ||
</Button> | ||
</Tooltip> | ||
<Tooltip placement="right-end" content="prompt text"> | ||
<Button class="w-18"> | ||
RB | ||
</Button> | ||
</Tooltip> | ||
</Space> | ||
</div> | ||
</div> | ||
<div ml-20> | ||
<Space> | ||
<Tooltip placement="bottom-start" content="prompt text"> | ||
<Button class="w-18"> | ||
BL | ||
</Button> | ||
</Tooltip> | ||
<Tooltip placement="bottom" content="prompt text"> | ||
<Button class="w-18"> | ||
Bottom | ||
</Button> | ||
</Tooltip> | ||
<Tooltip placement="bottom-end" content="prompt text"> | ||
<Button class="w-18"> | ||
BR | ||
</Button> | ||
</Tooltip> | ||
</Space> | ||
</div> | ||
</div> | ||
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,112 @@ | ||
--- | ||
title: Popover 气泡卡片 | ||
description: 点击/鼠标移入元素,弹出气泡式的卡片浮层。 | ||
--- | ||
|
||
## Installation | ||
|
||
::CodePreview{title="基本用法" src="PopoverBasic"} | ||
最简单的用法,浮层的大小由内容区域决定。 | ||
#code | ||
```vue | ||
<script setup lang="ts"> | ||
import { Button, Popover } from '@lite-space/ui' | ||
</script> | ||
<template> | ||
<Popover title="测试Title"> | ||
<Button>Hover me</Button> | ||
<template #content> | ||
<div> | ||
<p>Content</p> | ||
<p>Content</p> | ||
</div> | ||
</template> | ||
</Popover> | ||
</template> | ||
``` | ||
:: | ||
|
||
::CodePreview{title="位置" src="PopoverPlacement"} | ||
位置有 12 个方向。 | ||
|
||
#code | ||
```vue | ||
<script setup lang="ts"> | ||
import { Button, Popover, Space } from '@lite-space/ui' | ||
const [DefineTemplate, ReuseTemplate] = createReusableTemplate() | ||
</script> | ||
<template> | ||
<DefineTemplate v-slot="{ placement, text }"> | ||
<Popover :placement="placement" title="测试Title"> | ||
<Button class="w-18"> | ||
{{ text }} | ||
</Button> | ||
<template #content> | ||
<div> | ||
<p>Content</p> | ||
<p>Content</p> | ||
</div> | ||
</template> | ||
</Popover> | ||
</DefineTemplate> | ||
<div px-6> | ||
<div ml-20> | ||
<Space> | ||
<ReuseTemplate placement="top-start" text="TL" /> | ||
<ReuseTemplate placement="top" text="Top" /> | ||
<ReuseTemplate placement="top-end" text="TR" /> | ||
</Space> | ||
</div> | ||
<div flex="~ items-center justify-between"> | ||
<div> | ||
<Space direction="vertical"> | ||
<ReuseTemplate placement="left-start" text="LT" /> | ||
<ReuseTemplate placement="left" text="Left" /> | ||
<ReuseTemplate placement="left-end" text="LB" /> | ||
</Space> | ||
</div> | ||
<div> | ||
<Space direction="vertical"> | ||
<ReuseTemplate placement="right-start" text="RT" /> | ||
<ReuseTemplate placement="right" text="Right" /> | ||
<ReuseTemplate placement="right-end" text="RB" /> | ||
</Space> | ||
</div> | ||
</div> | ||
<div ml-20> | ||
<Space> | ||
<ReuseTemplate placement="bottom-start" text="BL" /> | ||
<ReuseTemplate placement="bottom" text="Bottom" /> | ||
<ReuseTemplate placement="bottom-end" text="BR" /> | ||
</Space> | ||
</div> | ||
</div> | ||
</template> | ||
``` | ||
:: | ||
|
||
::CodePreview{title="偏移" src="PopoverOffest"} | ||
使用 `offset` 属性设置偏移量。 | ||
|
||
#code | ||
```vue | ||
<script setup lang="ts"> | ||
import { Button, Popover } from '@lite-space/ui' | ||
</script> | ||
<template> | ||
<Popover title="测试Title" :offset="30"> | ||
<Button>Hover me</Button> | ||
<template #content> | ||
<div> | ||
<p>Content</p> | ||
<p>Content</p> | ||
</div> | ||
</template> | ||
</Popover> | ||
</template> | ||
``` | ||
:: |
Oops, something went wrong.