mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 02:59:58 +08:00
demo: Tag demo update (#47751)
* demo: Tag demo update * fix: fix * fix: fix
This commit is contained in:
parent
7d9bc97c9b
commit
630f4d9cfb
@ -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
|
||||
|
@ -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
|
||||
|
@ -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>
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
|
Loading…
Reference in New Issue
Block a user