2019-03-21 10:07:56 +08:00
|
|
|
---
|
|
|
|
order: 4
|
|
|
|
title:
|
|
|
|
zh-CN: 隐藏情况下计算字符对齐
|
|
|
|
en-US: Calculate text style when hiding
|
|
|
|
debug: true
|
|
|
|
---
|
|
|
|
|
|
|
|
## zh-CN
|
|
|
|
|
|
|
|
切换 Avatar 显示的时候,文本样式应该居中并正确调整字体大小。
|
|
|
|
|
|
|
|
## en-US
|
|
|
|
|
|
|
|
Text inside Avatar should be set a proper font size when toggle it's visibility.
|
|
|
|
|
2020-01-21 16:21:37 +08:00
|
|
|
```tsx
|
2020-01-22 12:11:49 +08:00
|
|
|
import React, { useState } from 'react';
|
2019-03-21 10:07:56 +08:00
|
|
|
import { Avatar, Button } from 'antd';
|
|
|
|
|
2020-01-21 16:21:37 +08:00
|
|
|
type SizeType = 'large' | 'small' | 'default' | number;
|
2020-01-21 17:14:58 +08:00
|
|
|
const App: React.FC = () => {
|
2020-01-22 12:11:49 +08:00
|
|
|
const [hide, setHide] = useState(true);
|
|
|
|
const [size, setSize] = useState<SizeType>('large');
|
|
|
|
const [scale, setScale] = useState(1);
|
2020-01-21 16:21:37 +08:00
|
|
|
const toggle = () => {
|
|
|
|
setHide(!hide);
|
2019-03-21 10:07:56 +08:00
|
|
|
};
|
|
|
|
|
2020-01-21 16:21:37 +08:00
|
|
|
const toggleSize = () => {
|
|
|
|
const sizes = ['small', 'default', 'large'] as SizeType[];
|
|
|
|
let current = sizes.indexOf(size) + 1;
|
2019-03-21 10:07:56 +08:00
|
|
|
if (current > 2) {
|
|
|
|
current = 0;
|
|
|
|
}
|
2020-01-21 16:21:37 +08:00
|
|
|
setSize(sizes[current]);
|
2019-05-07 14:57:32 +08:00
|
|
|
};
|
2019-03-21 10:07:56 +08:00
|
|
|
|
2020-01-21 16:21:37 +08:00
|
|
|
const changeScale = () => {
|
|
|
|
setScale(scale === 1 ? 2 : 1);
|
2019-05-07 14:57:32 +08:00
|
|
|
};
|
2019-03-21 10:07:56 +08:00
|
|
|
|
2020-01-21 16:21:37 +08:00
|
|
|
return (
|
2020-05-25 16:27:02 +08:00
|
|
|
<>
|
2020-01-21 16:21:37 +08:00
|
|
|
<Button onClick={toggle}>Toggle Avatar visibility</Button>
|
|
|
|
<Button onClick={toggleSize}>Toggle Avatar size</Button>
|
|
|
|
<Button onClick={changeScale}>Change Avatar scale</Button>
|
|
|
|
<br />
|
|
|
|
<br />
|
|
|
|
<div style={{ textAlign: 'center', transform: `scale(${scale})`, marginTop: 24 }}>
|
|
|
|
<Avatar size={size} style={{ background: '#7265e6', display: hide ? 'none' : '' }}>
|
|
|
|
Avatar
|
|
|
|
</Avatar>
|
|
|
|
<Avatar
|
|
|
|
size={size}
|
|
|
|
src="invalid"
|
|
|
|
style={{ background: '#00a2ae', display: hide ? 'none' : '' }}
|
|
|
|
>
|
|
|
|
Invalid
|
|
|
|
</Avatar>
|
|
|
|
<div style={{ display: hide ? 'none' : '' }}>
|
|
|
|
<Avatar size={size} style={{ background: '#7265e6' }}>
|
2019-03-21 10:07:56 +08:00
|
|
|
Avatar
|
|
|
|
</Avatar>
|
2020-01-21 16:21:37 +08:00
|
|
|
<Avatar size={size} src="invalid" style={{ background: '#00a2ae' }}>
|
2019-03-21 10:07:56 +08:00
|
|
|
Invalid
|
|
|
|
</Avatar>
|
|
|
|
</div>
|
|
|
|
</div>
|
2020-05-25 16:27:02 +08:00
|
|
|
</>
|
2020-01-21 16:21:37 +08:00
|
|
|
);
|
|
|
|
};
|
2019-03-21 10:07:56 +08:00
|
|
|
|
2022-04-03 23:27:45 +08:00
|
|
|
export default () => <App />;
|
2019-05-07 14:57:32 +08:00
|
|
|
```
|