mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-27 12:39:49 +08:00
demo: update Rate demo (#46891)
* feat: CP support Tag closeIcon * fix: fix * fix: fix
This commit is contained in:
parent
8555d3df77
commit
bd505a690c
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import { FrownOutlined, MehOutlined, SmileOutlined } from '@ant-design/icons';
|
||||
import { Rate } from 'antd';
|
||||
import { Flex, Rate } from 'antd';
|
||||
|
||||
const customIcons: Record<number, React.ReactNode> = {
|
||||
1: <FrownOutlined />,
|
||||
@ -11,11 +11,10 @@ const customIcons: Record<number, React.ReactNode> = {
|
||||
};
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Flex gap="middle" vertical>
|
||||
<Rate defaultValue={2} character={({ index = 0 }) => index + 1} />
|
||||
<br />
|
||||
<Rate defaultValue={3} character={({ index = 0 }) => customIcons[index + 1]} />
|
||||
</>
|
||||
</Flex>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
@ -1,15 +1,13 @@
|
||||
import React from 'react';
|
||||
import { HeartOutlined } from '@ant-design/icons';
|
||||
import { Rate } from 'antd';
|
||||
import { Flex, Rate } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Flex vertical gap="middle">
|
||||
<Rate character={<HeartOutlined />} allowHalf />
|
||||
<br />
|
||||
<Rate character="A" allowHalf style={{ fontSize: 36 }} />
|
||||
<br />
|
||||
<Rate character="好" allowHalf />
|
||||
</>
|
||||
</Flex>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
@ -1,18 +1,17 @@
|
||||
import React from 'react';
|
||||
import { Space, Rate } from 'antd';
|
||||
import { Flex, Rate } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Space>
|
||||
<Flex gap="middle" vertical>
|
||||
<Flex gap="middle">
|
||||
<Rate defaultValue={3} />
|
||||
<span>allowClear: true</span>
|
||||
</Space>
|
||||
<br />
|
||||
<Space>
|
||||
<Rate allowClear={false} defaultValue={3} />
|
||||
</Flex>
|
||||
<Flex gap="middle">
|
||||
<Rate defaultValue={3} allowClear={false} />
|
||||
<span>allowClear: false</span>
|
||||
</Space>
|
||||
</>
|
||||
</Flex>
|
||||
</Flex>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
@ -1,6 +1,6 @@
|
||||
## zh-CN
|
||||
|
||||
Component Token Debug.
|
||||
调试使用。
|
||||
|
||||
## en-US
|
||||
|
||||
|
@ -1,16 +1,15 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Space, Rate } from 'antd';
|
||||
import { Flex, Rate } from 'antd';
|
||||
|
||||
const desc = ['terrible', 'bad', 'normal', 'good', 'wonderful'];
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [value, setValue] = useState(3);
|
||||
|
||||
return (
|
||||
<Space>
|
||||
<Flex gap="middle" vertical>
|
||||
<Rate tooltips={desc} onChange={setValue} value={value} />
|
||||
{value ? <span>{desc[value - 1]}</span> : ''}
|
||||
</Space>
|
||||
{value ? <span>{desc[value - 1]}</span> : null}
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user