Skip to content

Commit 72f9262

Browse files
selicensselicens
authored
feat(Tag): add border less & synch checkable (#6819)
1 parent c2d71fa commit 72f9262

File tree

8 files changed

+127
-12
lines changed

8 files changed

+127
-12
lines changed

‎components/tag/__tests__/__snapshots__/demo.test.js.snap

+48
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,54 @@
22

33
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>`;
44

5+
exports[`renders ./components/tag/demo/border-less.vue correctly 1`] = `
6+
<div class="ant-space ant-space-horizontal ant-space-align-center" style="flex-wrap: wrap; margin-bottom: -8px;">
7+
<div class="ant-space-item" style="margin-right: 0px; padding-bottom: 8px;"><span class="ant-tag ant-tag-borderless">Tag 1<!----></span></div>
8+
<!---->
9+
<div class="ant-space-item" style="margin-right: 0px; padding-bottom: 8px;"><span class="ant-tag ant-tag-borderless">Tag 2<!----></span></div>
10+
<!---->
11+
<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>
12+
<!---->
13+
<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>
14+
<!---->
15+
</div>
16+
<div class="ant-divider ant-divider-horizontal" role="separator">
17+
<!---->
18+
</div>
19+
<div class="ant-space ant-space-horizontal ant-space-align-center" style="flex-wrap: wrap; margin-bottom: -8px;">
20+
<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>
21+
<!---->
22+
<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>
23+
<!---->
24+
<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>
25+
<!---->
26+
<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>
27+
<!---->
28+
<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>
29+
<!---->
30+
<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>
31+
<!---->
32+
<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>
33+
<!---->
34+
<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>
35+
<!---->
36+
<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>
37+
<!---->
38+
<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>
39+
<!---->
40+
<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>
41+
<!---->
42+
<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>
43+
<!---->
44+
<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>
45+
<!---->
46+
<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>
47+
<!---->
48+
<div class="ant-space-item" style="padding-bottom: 8px;"><span class="ant-tag ant-tag-purple ant-tag-borderless"> purple <!----></span></div>
49+
<!---->
50+
</div>
51+
`;
52+
553
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>`;
654

755
exports[`renders ./components/tag/demo/colorful.vue correctly 1`] = `

‎components/tag/demo/border-less.vue

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<docs>
2+
---
3+
order: 7
4+
title:
5+
zh-CN: 无边框
6+
en-US: Border Less
7+
---
8+
9+
## zh-CN
10+
11+
无边框模式。
12+
13+
## en-US
14+
border less.
15+
16+
</docs>
17+
18+
<template>
19+
<a-space :size="[0, 'small']" wrap>
20+
<a-tag :bordered="false">Tag 1</a-tag>
21+
<a-tag :bordered="false">Tag 2</a-tag>
22+
<a-tag :bordered="false" closable>Tag 3</a-tag>
23+
<a-tag :bordered="false" closable>Tag 4</a-tag>
24+
</a-space>
25+
<a-divider />
26+
<a-space :size="[0, 'small']" wrap>
27+
<a-tag :bordered="false" color="processing">processing</a-tag>
28+
<a-tag :bordered="false" color="success">success</a-tag>
29+
<a-tag :bordered="false" color="error">error</a-tag>
30+
<a-tag :bordered="false" color="warning">warning</a-tag>
31+
<a-tag :bordered="false" color="magenta">magenta</a-tag>
32+
<a-tag :bordered="false" color="red">red</a-tag>
33+
<a-tag :bordered="false" color="volcano">volcano</a-tag>
34+
<a-tag :bordered="false" color="orange">orange</a-tag>
35+
<a-tag :bordered="false" color="gold">gold</a-tag>
36+
<a-tag :bordered="false" color="lime">lime</a-tag>
37+
<a-tag :bordered="false" color="green">green</a-tag>
38+
<a-tag :bordered="false" color="cyan">cyan</a-tag>
39+
<a-tag :bordered="false" color="blue">blue</a-tag>
40+
<a-tag :bordered="false" color="geekblue">geekblue</a-tag>
41+
<a-tag :bordered="false" color="purple">purple</a-tag>
42+
</a-space>
43+
</template>

‎components/tag/demo/checkable.vue

+17-12
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
---
33
order: 1
44
title:
5-
zh-CN: 可选择
5+
zh-CN: 可选择标签
66
en-US: Checkable
77
---
88

@@ -19,18 +19,23 @@ title:
1919
</docs>
2020

2121
<template>
22-
<div>
23-
<a-checkable-tag v-model:checked="checked1" @change="handleChange">Tag1</a-checkable-tag>
24-
<a-checkable-tag v-model:checked="checked2" @change="handleChange">Tag2</a-checkable-tag>
25-
<a-checkable-tag v-model:checked="checked3" @change="handleChange">Tag3</a-checkable-tag>
26-
</div>
22+
<span style="margin-right: 8px">Categories:</span>
23+
<a-space :size="[0, 8]" wrap>
24+
<a-checkable-tag
25+
v-for="(tag, index) in tagsData"
26+
:key="tag"
27+
v-model:checked="selectTags[index]"
28+
@change="checked => handleChange(tag, checked)"
29+
>
30+
{{ tag }}
31+
</a-checkable-tag>
32+
</a-space>
2733
</template>
2834
<script lang="ts" setup>
29-
import { ref } from 'vue';
30-
const handleChange = (checked: boolean) => {
31-
console.log(checked);
35+
import { reactive } from 'vue';
36+
const tagsData = reactive(['Movies', 'Books', 'Music', 'Sports']);
37+
const selectTags = reactive([false, true, false, false]);
38+
const handleChange = (tag: string, checked: boolean) => {
39+
console.log(tag, checked);
3240
};
33-
const checked1 = ref(false);
34-
const checked2 = ref(false);
35-
const checked3 = ref(false);
3641
</script>

‎components/tag/demo/index.vue

+3
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
<HotTags />
88
<Icon />
99
<Status />
10+
<BorderLess />
1011
</demo-sort>
1112
</template>
1213

@@ -18,6 +19,7 @@ import Control from './control.vue';
1819
import HotTags from './hot-tags.vue';
1920
import Icon from './icon.vue';
2021
import Status from './status.vue';
22+
import BorderLess from './border-less.vue';
2123
import CN from '../index.zh-CN.md';
2224
import US from '../index.en-US.md';
2325
import { defineComponent } from 'vue';
@@ -33,6 +35,7 @@ export default defineComponent({
3335
HotTags,
3436
Icon,
3537
Status,
38+
BorderLess,
3639
},
3740
});
3841
</script>

‎components/tag/index.en-US.md

+1
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ Tag for categorizing or markup.
2323
| closeIcon | Custom close icon | VNode \| slot | - | 2.0.0 |
2424
| color | Color of the Tag | string | - | |
2525
| icon | Set the icon of tag | VNode \| slot | - | 2.0.0 |
26+
| bordered | Whether has border style | boolean | `true` | 4.x |
2627

2728
### Tag Events
2829

‎components/tag/index.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ export const tagProps = () => ({
3030
onClick: eventType<(e: MouseEvent) => void>(),
3131
'onUpdate:visible': Function as PropType<(vis: boolean) => void>,
3232
icon: PropTypes.any,
33+
bordered: { type: Boolean, default: true },
3334
});
3435

3536
export type TagProps = HTMLAttributes & Partial<ExtractPropTypes<ReturnType<typeof tagProps>>>;
@@ -98,6 +99,7 @@ const Tag = defineComponent({
9899
[`${prefixCls.value}-has-color`]: props.color && !isInternalColor.value,
99100
[`${prefixCls.value}-hidden`]: !visible.value,
100101
[`${prefixCls.value}-rtl`]: direction.value === 'rtl',
102+
[`${prefixCls.value}-borderless`]: !props.bordered,
101103
}),
102104
);
103105
const handleClick = (e: MouseEvent) => {

‎components/tag/index.zh-CN.md

+1
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*JPNAQYrVkYkAAA
2424
| closeIcon | 自定义关闭按钮 | VNode \| slot | - | 2.0.0 |
2525
| color | 标签色 | string | - | |
2626
| icon | 设置图标 | VNode \| slot | - | 2.0.0 |
27+
| bordered | 是否有边框 | boolean | `true` | 4.x |
2728

2829
### 事件
2930

‎components/tag/style/index.ts

+12
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ interface TagToken extends FullToken<'Tag'> {
1414
tagDefaultColor: string;
1515
tagIconSize: number;
1616
tagPaddingHorizontal: number;
17+
tagBorderlessBg: string;
1718
}
1819

1920
// ============================== Styles ==============================
@@ -31,6 +32,9 @@ const genTagStatusStyle = (
3132
color: token[`color${cssVariableType}`],
3233
background: token[`color${capitalizedCssVariableType}Bg`],
3334
borderColor: token[`color${capitalizedCssVariableType}Border`],
35+
[`&${token.componentCls}-borderless`]: {
36+
borderColor: 'transparent',
37+
},
3438
},
3539
};
3640
};
@@ -48,6 +52,9 @@ const genPresetStyle = (token: TagToken) =>
4852
background: darkColor,
4953
borderColor: darkColor,
5054
},
55+
[`&${token.componentCls}-borderless`]: {
56+
borderColor: 'transparent',
57+
},
5158
},
5259
}));
5360

@@ -138,6 +145,10 @@ const genBaseStyle = (token: TagToken): CSSObject => {
138145
marginInlineStart: paddingInline,
139146
},
140147
},
148+
[`${componentCls}-borderless`]: {
149+
borderColor: 'transparent',
150+
background: token.tagBorderlessBg,
151+
},
141152
};
142153
};
143154

@@ -158,6 +169,7 @@ export default genComponentStyleHook('Tag', token => {
158169
tagDefaultColor,
159170
tagIconSize: fontSizeIcon - 2 * lineWidth, // Tag icon is much more smaller
160171
tagPaddingHorizontal: 8, // Fixed padding.
172+
tagBorderlessBg: token.colorFillTertiary,
161173
});
162174

163175
return [

0 commit comments

Comments
 (0)