mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-11-29 18:48:32 +08:00
feat(Tag): add border less & synch checkable (#6819)
This commit is contained in:
selicens
GitHub
parent
c2d71fa7c3
commit
72f9262d0a
@ -2,6 +2,54 @@
|
||||
|
||||
exports[`renders ./components/tag/demo/basic.vue correctly 1`] = `<div><span class="ant-tag">Tag 1<!----></span><span class="ant-tag"><a href="https://github.com/vueComponent/ant-design">Link</a><!----></span><span class="ant-tag">Tag 2<span role="img" aria-label="close" tabindex="-1" class="anticon anticon-close ant-tag-close-icon"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></span><span class="ant-tag">Prevent Default<span role="img" aria-label="close" tabindex="-1" class="anticon anticon-close ant-tag-close-icon"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></span></div>`;
|
||||
|
||||
exports[`renders ./components/tag/demo/border-less.vue correctly 1`] = `
|
||||
<div class="ant-space ant-space-horizontal ant-space-align-center" style="flex-wrap: wrap; margin-bottom: -8px;">
|
||||
<div class="ant-space-item" style="margin-right: 0px; padding-bottom: 8px;"><span class="ant-tag ant-tag-borderless">Tag 1<!----></span></div>
|
||||
<!---->
|
||||
<div class="ant-space-item" style="margin-right: 0px; padding-bottom: 8px;"><span class="ant-tag ant-tag-borderless">Tag 2<!----></span></div>
|
||||
<!---->
|
||||
<div class="ant-space-item" style="margin-right: 0px; padding-bottom: 8px;"><span class="ant-tag ant-tag-borderless">Tag 3<span role="img" aria-label="close" tabindex="-1" class="anticon anticon-close ant-tag-close-icon"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" fill-rule="evenodd" viewBox="64 64 896 896"><path d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"></path></svg></span></span></div>
|
||||
<!---->
|
||||
<div class="ant-space-item" style="padding-bottom: 8px;"><span class="ant-tag ant-tag-borderless">Tag 4<span role="img" aria-label="close" tabindex="-1" class="anticon anticon-close ant-tag-close-icon"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" fill-rule="evenodd" viewBox="64 64 896 896"><path d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"></path></svg></span></span></div>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="ant-divider ant-divider-horizontal" role="separator">
|
||||
<!---->
|
||||
</div>
|
||||
<div class="ant-space ant-space-horizontal ant-space-align-center" style="flex-wrap: wrap; margin-bottom: -8px;">
|
||||
<div class="ant-space-item" style="margin-right: 0px; padding-bottom: 8px;"><span class="ant-tag ant-tag-processing ant-tag-borderless"> processing <!----></span></div>
|
||||
<!---->
|
||||
<div class="ant-space-item" style="margin-right: 0px; padding-bottom: 8px;"><span class="ant-tag ant-tag-success ant-tag-borderless"> success <!----></span></div>
|
||||
<!---->
|
||||
<div class="ant-space-item" style="margin-right: 0px; padding-bottom: 8px;"><span class="ant-tag ant-tag-error ant-tag-borderless"> error <!----></span></div>
|
||||
<!---->
|
||||
<div class="ant-space-item" style="margin-right: 0px; padding-bottom: 8px;"><span class="ant-tag ant-tag-warning ant-tag-borderless"> warning <!----></span></div>
|
||||
<!---->
|
||||
<div class="ant-space-item" style="margin-right: 0px; padding-bottom: 8px;"><span class="ant-tag ant-tag-magenta ant-tag-borderless"> magenta <!----></span></div>
|
||||
<!---->
|
||||
<div class="ant-space-item" style="margin-right: 0px; padding-bottom: 8px;"><span class="ant-tag ant-tag-red ant-tag-borderless"> red <!----></span></div>
|
||||
<!---->
|
||||
<div class="ant-space-item" style="margin-right: 0px; padding-bottom: 8px;"><span class="ant-tag ant-tag-volcano ant-tag-borderless"> volcano <!----></span></div>
|
||||
<!---->
|
||||
<div class="ant-space-item" style="margin-right: 0px; padding-bottom: 8px;"><span class="ant-tag ant-tag-orange ant-tag-borderless"> orange <!----></span></div>
|
||||
<!---->
|
||||
<div class="ant-space-item" style="margin-right: 0px; padding-bottom: 8px;"><span class="ant-tag ant-tag-gold ant-tag-borderless"> gold <!----></span></div>
|
||||
<!---->
|
||||
<div class="ant-space-item" style="margin-right: 0px; padding-bottom: 8px;"><span class="ant-tag ant-tag-lime ant-tag-borderless"> lime <!----></span></div>
|
||||
<!---->
|
||||
<div class="ant-space-item" style="margin-right: 0px; padding-bottom: 8px;"><span class="ant-tag ant-tag-green ant-tag-borderless"> green <!----></span></div>
|
||||
<!---->
|
||||
<div class="ant-space-item" style="margin-right: 0px; padding-bottom: 8px;"><span class="ant-tag ant-tag-cyan ant-tag-borderless"> cyan <!----></span></div>
|
||||
<!---->
|
||||
<div class="ant-space-item" style="margin-right: 0px; padding-bottom: 8px;"><span class="ant-tag ant-tag-blue ant-tag-borderless"> blue <!----></span></div>
|
||||
<!---->
|
||||
<div class="ant-space-item" style="margin-right: 0px; padding-bottom: 8px;"><span class="ant-tag ant-tag-geekblue ant-tag-borderless"> geekblue <!----></span></div>
|
||||
<!---->
|
||||
<div class="ant-space-item" style="padding-bottom: 8px;"><span class="ant-tag ant-tag-purple ant-tag-borderless"> purple <!----></span></div>
|
||||
<!---->
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/tag/demo/checkable.vue correctly 1`] = `<div><span class="ant-tag ant-tag-checkable">Tag1</span><span class="ant-tag ant-tag-checkable">Tag2</span><span class="ant-tag ant-tag-checkable">Tag3</span></div>`;
|
||||
|
||||
exports[`renders ./components/tag/demo/colorful.vue correctly 1`] = `
|
||||
|
||||
43
components/tag/demo/border-less.vue
Normal file
43
components/tag/demo/border-less.vue
Normal file
@ -0,0 +1,43 @@
|
||||
<docs>
|
||||
---
|
||||
order: 7
|
||||
title:
|
||||
zh-CN: 无边框
|
||||
en-US: Border Less
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
无边框模式。
|
||||
|
||||
## en-US
|
||||
border less.
|
||||
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-space :size="[0, 'small']" wrap>
|
||||
<a-tag :bordered="false">Tag 1</a-tag>
|
||||
<a-tag :bordered="false">Tag 2</a-tag>
|
||||
<a-tag :bordered="false" closable>Tag 3</a-tag>
|
||||
<a-tag :bordered="false" closable>Tag 4</a-tag>
|
||||
</a-space>
|
||||
<a-divider />
|
||||
<a-space :size="[0, 'small']" wrap>
|
||||
<a-tag :bordered="false" color="processing">processing</a-tag>
|
||||
<a-tag :bordered="false" color="success">success</a-tag>
|
||||
<a-tag :bordered="false" color="error">error</a-tag>
|
||||
<a-tag :bordered="false" color="warning">warning</a-tag>
|
||||
<a-tag :bordered="false" color="magenta">magenta</a-tag>
|
||||
<a-tag :bordered="false" color="red">red</a-tag>
|
||||
<a-tag :bordered="false" color="volcano">volcano</a-tag>
|
||||
<a-tag :bordered="false" color="orange">orange</a-tag>
|
||||
<a-tag :bordered="false" color="gold">gold</a-tag>
|
||||
<a-tag :bordered="false" color="lime">lime</a-tag>
|
||||
<a-tag :bordered="false" color="green">green</a-tag>
|
||||
<a-tag :bordered="false" color="cyan">cyan</a-tag>
|
||||
<a-tag :bordered="false" color="blue">blue</a-tag>
|
||||
<a-tag :bordered="false" color="geekblue">geekblue</a-tag>
|
||||
<a-tag :bordered="false" color="purple">purple</a-tag>
|
||||
</a-space>
|
||||
</template>
|
||||
@ -2,7 +2,7 @@
|
||||
---
|
||||
order: 1
|
||||
title:
|
||||
zh-CN: 可选择
|
||||
zh-CN: 可选择标签
|
||||
en-US: Checkable
|
||||
---
|
||||
|
||||
@ -19,18 +19,23 @@ title:
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<a-checkable-tag v-model:checked="checked1" @change="handleChange">Tag1</a-checkable-tag>
|
||||
<a-checkable-tag v-model:checked="checked2" @change="handleChange">Tag2</a-checkable-tag>
|
||||
<a-checkable-tag v-model:checked="checked3" @change="handleChange">Tag3</a-checkable-tag>
|
||||
</div>
|
||||
<span style="margin-right: 8px">Categories:</span>
|
||||
<a-space :size="[0, 8]" wrap>
|
||||
<a-checkable-tag
|
||||
v-for="(tag, index) in tagsData"
|
||||
:key="tag"
|
||||
v-model:checked="selectTags[index]"
|
||||
@change="checked => handleChange(tag, checked)"
|
||||
>
|
||||
{{ tag }}
|
||||
</a-checkable-tag>
|
||||
</a-space>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
const handleChange = (checked: boolean) => {
|
||||
console.log(checked);
|
||||
import { reactive } from 'vue';
|
||||
const tagsData = reactive(['Movies', 'Books', 'Music', 'Sports']);
|
||||
const selectTags = reactive([false, true, false, false]);
|
||||
const handleChange = (tag: string, checked: boolean) => {
|
||||
console.log(tag, checked);
|
||||
};
|
||||
const checked1 = ref(false);
|
||||
const checked2 = ref(false);
|
||||
const checked3 = ref(false);
|
||||
</script>
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
<HotTags />
|
||||
<Icon />
|
||||
<Status />
|
||||
<BorderLess />
|
||||
</demo-sort>
|
||||
</template>
|
||||
|
||||
@ -18,6 +19,7 @@ import Control from './control.vue';
|
||||
import HotTags from './hot-tags.vue';
|
||||
import Icon from './icon.vue';
|
||||
import Status from './status.vue';
|
||||
import BorderLess from './border-less.vue';
|
||||
import CN from '../index.zh-CN.md';
|
||||
import US from '../index.en-US.md';
|
||||
import { defineComponent } from 'vue';
|
||||
@ -33,6 +35,7 @@ export default defineComponent({
|
||||
HotTags,
|
||||
Icon,
|
||||
Status,
|
||||
BorderLess,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -23,6 +23,7 @@ Tag for categorizing or markup.
|
||||
| closeIcon | Custom close icon | VNode \| slot | - | 2.0.0 |
|
||||
| color | Color of the Tag | string | - | |
|
||||
| icon | Set the icon of tag | VNode \| slot | - | 2.0.0 |
|
||||
| bordered | Whether has border style | boolean | `true` | 4.x |
|
||||
|
||||
### Tag Events
|
||||
|
||||
|
||||
@ -30,6 +30,7 @@ export const tagProps = () => ({
|
||||
onClick: eventType<(e: MouseEvent) => void>(),
|
||||
'onUpdate:visible': Function as PropType<(vis: boolean) => void>,
|
||||
icon: PropTypes.any,
|
||||
bordered: { type: Boolean, default: true },
|
||||
});
|
||||
|
||||
export type TagProps = HTMLAttributes & Partial<ExtractPropTypes<ReturnType<typeof tagProps>>>;
|
||||
@ -98,6 +99,7 @@ const Tag = defineComponent({
|
||||
[`${prefixCls.value}-has-color`]: props.color && !isInternalColor.value,
|
||||
[`${prefixCls.value}-hidden`]: !visible.value,
|
||||
[`${prefixCls.value}-rtl`]: direction.value === 'rtl',
|
||||
[`${prefixCls.value}-borderless`]: !props.bordered,
|
||||
}),
|
||||
);
|
||||
const handleClick = (e: MouseEvent) => {
|
||||
|
||||
@ -24,6 +24,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*JPNAQYrVkYkAAA
|
||||
| closeIcon | 自定义关闭按钮 | VNode \| slot | - | 2.0.0 |
|
||||
| color | 标签色 | string | - | |
|
||||
| icon | 设置图标 | VNode \| slot | - | 2.0.0 |
|
||||
| bordered | 是否有边框 | boolean | `true` | 4.x |
|
||||
|
||||
### 事件
|
||||
|
||||
|
||||
@ -14,6 +14,7 @@ interface TagToken extends FullToken<'Tag'> {
|
||||
tagDefaultColor: string;
|
||||
tagIconSize: number;
|
||||
tagPaddingHorizontal: number;
|
||||
tagBorderlessBg: string;
|
||||
}
|
||||
|
||||
// ============================== Styles ==============================
|
||||
@ -31,6 +32,9 @@ const genTagStatusStyle = (
|
||||
color: token[`color${cssVariableType}`],
|
||||
background: token[`color${capitalizedCssVariableType}Bg`],
|
||||
borderColor: token[`color${capitalizedCssVariableType}Border`],
|
||||
[`&${token.componentCls}-borderless`]: {
|
||||
borderColor: 'transparent',
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
@ -48,6 +52,9 @@ const genPresetStyle = (token: TagToken) =>
|
||||
background: darkColor,
|
||||
borderColor: darkColor,
|
||||
},
|
||||
[`&${token.componentCls}-borderless`]: {
|
||||
borderColor: 'transparent',
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
@ -138,6 +145,10 @@ const genBaseStyle = (token: TagToken): CSSObject => {
|
||||
marginInlineStart: paddingInline,
|
||||
},
|
||||
},
|
||||
[`${componentCls}-borderless`]: {
|
||||
borderColor: 'transparent',
|
||||
background: token.tagBorderlessBg,
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
@ -158,6 +169,7 @@ export default genComponentStyleHook('Tag', token => {
|
||||
tagDefaultColor,
|
||||
tagIconSize: fontSizeIcon - 2 * lineWidth, // Tag icon is much more smaller
|
||||
tagPaddingHorizontal: 8, // Fixed padding.
|
||||
tagBorderlessBg: token.colorFillTertiary,
|
||||
});
|
||||
|
||||
return [
|
||||
|
||||
Loading…
Reference in New Issue
Block a user