mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-05 09:49:57 +08:00
6776bb8916
* docs: update demo * chore: add script * test: fix demo test * docs: convert demos * chore: move script * test: remove react-dom import * chore: update deps * docs: update riddle js * test: fix image test * docs: fix riddle demo
1.8 KiB
1.8 KiB
order | title | ||||
---|---|---|---|---|---|
2 |
|
zh-CN
对于字符型的头像,当字符串较长时,字体大小可以根据头像宽度自动调整。也可使用 gap
来设置字符距离左右两侧边界单位像素。
en-US
For letter type Avatar, when the letters are too long to display, the font size can be automatically adjusted according to the width of the Avatar. You can also use gap
to set the unit distance between left and right sides.
import React, { useState } from 'react';
import { Avatar, Button } from 'antd';
const UserList = ['U', 'Lucy', 'Tom', 'Edward'];
const ColorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae'];
const GapList = [4, 3, 2, 1];
const Autoset: React.FC = () => {
const [user, setUser] = useState(UserList[0]);
const [color, setColor] = useState(ColorList[0]);
const [gap, setGap] = useState(GapList[0]);
const changeUser = () => {
const index = UserList.indexOf(user);
setUser(index < UserList.length - 1 ? UserList[index + 1] : UserList[0]);
setColor(index < ColorList.length - 1 ? ColorList[index + 1] : ColorList[0]);
};
const changeGap = () => {
const index = GapList.indexOf(gap);
setGap(index < GapList.length - 1 ? GapList[index + 1] : GapList[0]);
};
return (
<>
<Avatar style={{ backgroundColor: color, verticalAlign: 'middle' }} size="large" gap={gap}>
{user}
</Avatar>
<Button
size="small"
style={{ margin: '0 16px', verticalAlign: 'middle' }}
onClick={changeUser}
>
ChangeUser
</Button>
<Button size="small" style={{ verticalAlign: 'middle' }} onClick={changeGap}>
changeGap
</Button>
</>
);
};
export default () => <Autoset />;