Installation
基本用法
最简单的用法,支持确认标题和描述。
自定义 Icon 图标
使用 icon
自定义提示 icon
。
<script setup lang="ts">
import { Button, Popconfirm } from '@lite-space/ui'
</script>
<template>
<Popconfirm
icon="i-carbon:accessibility"
title="Delete the task"
description="Are you sure to delete this task?"
ok-text="Yes"
cancel-text="No"
>
<Button danger>
Delete
</Button>
</Popconfirm>
</template>
位置
位置有 12 个方向。
<script setup lang="ts">
import { Button, Popconfirm, Space } from '@lite-space/ui'
const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
</script>
<template>
<DefineTemplate v-slot="{ placement, text }">
<Popconfirm
title="Delete the task"
description="Are you sure to delete this task?"
ok-text="Yes"
cancel-text="No"
:placement="placement"
>
<Button class="w-18">
{{ text }}
</Button>
</Popconfirm>
</DefineTemplate>
<div class="flex-center">
<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">
<div>
<Space direction="vertical">
<ReuseTemplate placement="left-start" text="LT" />
<ReuseTemplate placement="left" text="Left" />
<ReuseTemplate placement="left-end" text="LB" />
</Space>
</div>
<div ml-62>
<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>
</div>
</template>