mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-27 20:49:53 +08:00
Code Issues Actions 39 Packages Projects Releases Wiki Activity

demo: update Rate demo (#46891)

Browse Source 
* feat: CP support Tag closeIcon

* fix: fix

* fix: fix
This commit is contained in:
lijianan 2024-01-13 17:07:42 +08:00 committed by GitHub
parent 8555d3df77
commit bd505a690c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 1757 additions and 1806 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1852
components/rate/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

File diff suppressed because it is too large Load Diff

1668
components/rate/__tests__/__snapshots__/demo.test.ts.snap
View File

File diff suppressed because it is too large Load Diff

7
components/rate/demo/character-function.tsx
View File

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { FrownOutlined, MehOutlined, SmileOutlined } from '@ant-design/icons'; import { FrownOutlined, MehOutlined, SmileOutlined } from '@ant-design/icons';
import { Rate } from 'antd'; import { Flex, Rate } from 'antd';
const customIcons: Record<number, React.ReactNode> = { const customIcons: Record<number, React.ReactNode> = {
1: <FrownOutlined />, 1: <FrownOutlined />,
@ -11,11 +11,10 @@ const customIcons: Record<number, React.ReactNode> = {
}; };
const App: React.FC = () => ( const App: React.FC = () => (
<> <Flex gap="middle" vertical>
<Rate defaultValue={2} character={({ index = 0 }) => index + 1} /> <Rate defaultValue={2} character={({ index = 0 }) => index + 1} />
<br />
<Rate defaultValue={3} character={({ index = 0 }) => customIcons[index + 1]} /> <Rate defaultValue={3} character={({ index = 0 }) => customIcons[index + 1]} />
</> </Flex>
); );
export default App; export default App;

8
components/rate/demo/character.tsx
View File

@ -1,15 +1,13 @@
import React from 'react'; import React from 'react';
import { HeartOutlined } from '@ant-design/icons'; import { HeartOutlined } from '@ant-design/icons';
import { Rate } from 'antd'; import { Flex, Rate } from 'antd';
const App: React.FC = () => ( const App: React.FC = () => (
<> <Flex vertical gap="middle">
<Rate character={<HeartOutlined />} allowHalf /> <Rate character={<HeartOutlined />} allowHalf />
<br />
<Rate character="A" allowHalf style={{ fontSize: 36 }} /> <Rate character="A" allowHalf style={{ fontSize: 36 }} />
<br />
<Rate character="好" allowHalf /> <Rate character="好" allowHalf />
</> </Flex>
); );
export default App; export default App;

17
components/rate/demo/clear.tsx
View File

@ -1,18 +1,17 @@
import React from 'react'; import React from 'react';
import { Space, Rate } from 'antd'; import { Flex, Rate } from 'antd';
const App: React.FC = () => ( const App: React.FC = () => (
<> <Flex gap="middle" vertical>
<Space> <Flex gap="middle">
<Rate defaultValue={3} /> <Rate defaultValue={3} />
<span>allowClear: true</span> <span>allowClear: true</span>
</Space> </Flex>
<br /> <Flex gap="middle">
<Space> <Rate defaultValue={3} allowClear={false} />
<Rate allowClear={false} defaultValue={3} />
<span>allowClear: false</span> <span>allowClear: false</span>
</Space> </Flex>
</> </Flex>
); );
export default App; export default App;

2
components/rate/demo/component-token.md
View File

@ -1,6 +1,6 @@
## zh-CN ## zh-CN
Component Token Debug. 调试使用。
## en-US ## en-US

9
components/rate/demo/text.tsx
View File

@ -1,16 +1,15 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Space, Rate } from 'antd'; import { Flex, Rate } from 'antd';
const desc = ['terrible', 'bad', 'normal', 'good', 'wonderful']; const desc = ['terrible', 'bad', 'normal', 'good', 'wonderful'];
const App: React.FC = () => { const App: React.FC = () => {
const [value, setValue] = useState(3); const [value, setValue] = useState(3);
return ( return (
<Space> <Flex gap="middle" vertical>
<Rate tooltips={desc} onChange={setValue} value={value} /> <Rate tooltips={desc} onChange={setValue} value={value} />
{value ? <span>{desc[value - 1]}</span> : ''} {value ? <span>{desc[value - 1]}</span> : null}
</Space> </Flex>
); );
}; };