Skip to content

Commit

Permalink
feat: Tooltip and Popover components
Browse files Browse the repository at this point in the history
  • Loading branch information
@AntzyMo
AntzyMo committed Oct 12, 2024
1 parent 1fb3176 commit a1320aa
Show file tree
Hide file tree
Showing 27 changed files with 687 additions and 3 deletions.
15 changes: 15 additions & 0 deletions docs/components/content/Popover/PopoverBasic.vue
View file
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>
15 changes: 15 additions & 0 deletions docs/components/content/Popover/PopoverOffest.vue
View file
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>
53 changes: 53 additions & 0 deletions docs/components/content/Popover/PopoverPlacement.vue
View file
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>
9 changes: 9 additions & 0 deletions docs/components/content/Tooltip/TooltipBasic.vue
View file
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>
9 changes: 9 additions & 0 deletions docs/components/content/Tooltip/TooltipOffest.vue
View file
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>
86 changes: 86 additions & 0 deletions docs/components/content/Tooltip/TooltipPlacement.vue
View file
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>
112 changes: 112 additions & 0 deletions docs/content/docs/components/popover.md
View file
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>
```
::
Loading

0 comments on commit a1320aa

Please sign in to comment.