ant-design/components/avatar/demo/toggle-debug.md

76 lines
1.9 KiB
Markdown
Raw Normal View History

---
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';
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);
};
2020-01-21 16:21:37 +08:00
const toggleSize = () => {
const sizes = ['small', 'default', 'large'] as SizeType[];
let current = sizes.indexOf(size) + 1;
if (current > 2) {
current = 0;
}
2020-01-21 16:21:37 +08:00
setSize(sizes[current]);
2019-05-07 14:57:32 +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
};
2020-01-21 16:21:37 +08:00
return (
<>
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' }}>
Avatar
</Avatar>
2020-01-21 16:21:37 +08:00
<Avatar size={size} src="invalid" style={{ background: '#00a2ae' }}>
Invalid
</Avatar>
</div>
</div>
</>
2020-01-21 16:21:37 +08:00
);
};
export default () => <App />;
2019-05-07 14:57:32 +08:00
```