fix: ant tag icon default style (#5473)

This commit is contained in:
Netfan 2025-02-04 10:19:39 +08:00 committed by GitHub
parent a832edce0d
commit f8bb396dc4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 25 additions and 4 deletions

View File

@ -13,15 +13,25 @@
} }
/* * 修复按钮添加图标时的位置问题 */ /* * 修复按钮添加图标时的位置问题 */
svg { > svg {
display: inline-block; display: inline-block;
} }
svg + span { > svg + span {
margin-inline-start: 6px; margin-inline-start: 6px;
} }
} }
.ant-tag {
> svg {
display: inline-block;
}
> svg + span {
margin-inline-start: 4px;
}
}
.ant-message-notice-content, .ant-message-notice-content,
.ant-notification-notice { .ant-notification-notice {
@apply dark:border-border/60 dark:border; @apply dark:border-border/60 dark:border;

View File

@ -4,8 +4,9 @@ import type { TippyProps } from '@vben/common-ui';
import { reactive } from 'vue'; import { reactive } from 'vue';
import { Page, Tippy } from '@vben/common-ui'; import { Page, Tippy } from '@vben/common-ui';
import { ChevronDown } from '@vben/icons';
import { Button, Card, Flex } from 'ant-design-vue'; import { Button, Card, Flex, Tag } from 'ant-design-vue';
import { useVbenForm } from '#/adapter/form'; import { useVbenForm } from '#/adapter/form';
@ -254,7 +255,7 @@ function goDoc() {
<p class="mb-4"> <p class="mb-4">
指令形式使用比较简洁直接在需要展示tooltip的组件上用v-tippy传递配置适用于固定内容的工具提示 指令形式使用比较简洁直接在需要展示tooltip的组件上用v-tippy传递配置适用于固定内容的工具提示
</p> </p>
<Flex warp="warp" gap="20"> <Flex warp="warp" gap="20" align="center">
<Button v-tippy="'这是一个提示,使用了默认的配置'">默认配置</Button> <Button v-tippy="'这是一个提示,使用了默认的配置'">默认配置</Button>
<Button <Button
@ -277,8 +278,18 @@ function goDoc() {
animation: 'scale', animation: 'scale',
}" }"
> >
<template #icon>
<ChevronDown class="size-4" />
</template>
指定动画 指定动画
</Button> </Button>
<Tag color="#f50">
<template #icon>
<ChevronDown class="size-4" />
</template>
默认配置
</Tag>
</Flex> </Flex>
</Card> </Card>
<Card title="组件形式使用" class="mt-4"> <Card title="组件形式使用" class="mt-4">