demo: Tag demo update (#47751)

* demo: Tag demo update

* fix: fix

* fix: fix
This commit is contained in:
lijianan 2024-03-08 10:51:31 +08:00 committed by GitHub
parent 7d9bc97c9b
commit 630f4d9cfb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 42 additions and 31 deletions

View File

@ -1522,7 +1522,7 @@ exports[`renders components/select/demo/custom-tag-render.tsx extend context cor
<span>
<span
class="ant-tag ant-tag-gold"
style="margin-right: 3px;"
style="margin-inline-end: 4px;"
>
gold
<span
@ -1556,7 +1556,7 @@ exports[`renders components/select/demo/custom-tag-render.tsx extend context cor
<span>
<span
class="ant-tag ant-tag-cyan"
style="margin-right: 3px;"
style="margin-inline-end: 4px;"
>
cyan
<span

View File

@ -718,7 +718,7 @@ exports[`renders components/select/demo/custom-tag-render.tsx correctly 1`] = `
<span>
<span
class="ant-tag ant-tag-gold"
style="margin-right:3px"
style="margin-inline-end:4px"
>
gold
<span
@ -752,7 +752,7 @@ exports[`renders components/select/demo/custom-tag-render.tsx correctly 1`] = `
<span>
<span
class="ant-tag ant-tag-cyan"
style="margin-right:3px"
style="margin-inline-end:4px"
>
cyan
<span

View File

@ -4,7 +4,12 @@ import type { SelectProps } from 'antd';
type TagRender = SelectProps['tagRender'];
const options = [{ value: 'gold' }, { value: 'lime' }, { value: 'green' }, { value: 'cyan' }];
const options: SelectProps['options'] = [
{ value: 'gold' },
{ value: 'lime' },
{ value: 'green' },
{ value: 'cyan' },
];
const tagRender: TagRender = (props) => {
const { label, value, closable, onClose } = props;
@ -18,7 +23,7 @@ const tagRender: TagRender = (props) => {
onMouseDown={onPreventMouseDown}
closable={closable}
onClose={onClose}
style={{ marginRight: 3 }}
style={{ marginInlineEnd: 4 }}
>
{label}
</Tag>

View File

@ -17451,14 +17451,14 @@ exports[`renders components/table/demo/jsx.tsx extend context correctly 1`] = `
class="ant-table-cell"
>
<span
class="ant-tag ant-tag-blue"
class="ant-tag ant-tag-green"
>
nice
NICE
</span>
<span
class="ant-tag ant-tag-blue"
class="ant-tag ant-tag-geekblue"
>
developer
DEVELOPER
</span>
</td>
<td
@ -17512,9 +17512,9 @@ exports[`renders components/table/demo/jsx.tsx extend context correctly 1`] = `
class="ant-table-cell"
>
<span
class="ant-tag ant-tag-blue"
class="ant-tag ant-tag-volcano"
>
loser
LOSER
</span>
</td>
<td
@ -17568,14 +17568,14 @@ exports[`renders components/table/demo/jsx.tsx extend context correctly 1`] = `
class="ant-table-cell"
>
<span
class="ant-tag ant-tag-blue"
class="ant-tag ant-tag-green"
>
cool
COOL
</span>
<span
class="ant-tag ant-tag-blue"
class="ant-tag ant-tag-geekblue"
>
teacher
TEACHER
</span>
</td>
<td

View File

@ -14018,14 +14018,14 @@ exports[`renders components/table/demo/jsx.tsx correctly 1`] = `
class="ant-table-cell"
>
<span
class="ant-tag ant-tag-blue"
class="ant-tag ant-tag-green"
>
nice
NICE
</span>
<span
class="ant-tag ant-tag-blue"
class="ant-tag ant-tag-geekblue"
>
developer
DEVELOPER
</span>
</td>
<td
@ -14081,9 +14081,9 @@ exports[`renders components/table/demo/jsx.tsx correctly 1`] = `
class="ant-table-cell"
>
<span
class="ant-tag ant-tag-blue"
class="ant-tag ant-tag-volcano"
>
loser
LOSER
</span>
</td>
<td
@ -14139,14 +14139,14 @@ exports[`renders components/table/demo/jsx.tsx correctly 1`] = `
class="ant-table-cell"
>
<span
class="ant-tag ant-tag-blue"
class="ant-tag ant-tag-green"
>
cool
COOL
</span>
<span
class="ant-tag ant-tag-blue"
class="ant-tag ant-tag-geekblue"
>
teacher
TEACHER
</span>
</td>
<td

View File

@ -53,11 +53,17 @@ const App: React.FC = () => (
key="tags"
render={(tags: string[]) => (
<>
{tags.map((tag) => (
<Tag color="blue" key={tag}>
{tag}
</Tag>
))}
{tags.map((tag) => {
let color = tag.length > 5 ? 'geekblue' : 'green';
if (tag === 'loser') {
color = 'volcano';
}
return (
<Tag color={color} key={tag}>
{tag.toUpperCase()}
</Tag>
);
})}
</>
)}
/>