2019-11-21 20:23:56 +08:00
|
|
|
---
|
2020-06-30 13:09:04 +08:00
|
|
|
order: 2.1
|
2019-11-21 20:23:56 +08:00
|
|
|
title:
|
2020-06-30 13:09:04 +08:00
|
|
|
zh-CN: 按钮/头像/输入框/图像
|
|
|
|
en-US: Button/Avatar/Input/Image
|
2019-11-21 20:23:56 +08:00
|
|
|
---
|
|
|
|
|
|
|
|
## zh-CN
|
|
|
|
|
2020-06-28 22:41:59 +08:00
|
|
|
骨架按钮、头像、输入框和图像。
|
2019-11-21 20:23:56 +08:00
|
|
|
|
|
|
|
## en-US
|
|
|
|
|
2020-06-30 13:09:04 +08:00
|
|
|
Skeleton Button, Avatar, Input and Image.
|
2019-11-21 20:23:56 +08:00
|
|
|
|
2022-05-19 09:46:26 +08:00
|
|
|
```tsx
|
|
|
|
import type { RadioChangeEvent } from 'antd';
|
2022-05-23 14:37:16 +08:00
|
|
|
import { Divider, Form, Radio, Skeleton, Space, Switch } from 'antd';
|
|
|
|
import React, { useState } from 'react';
|
2019-11-21 20:23:56 +08:00
|
|
|
|
2022-05-19 09:46:26 +08:00
|
|
|
type SizeType = 'default' | 'small' | 'large';
|
2022-06-24 12:30:47 +08:00
|
|
|
type ButtonShapeType = 'circle' | 'square' | 'round' | 'default';
|
2022-05-19 09:46:26 +08:00
|
|
|
type AvatarShapeType = 'circle' | 'square';
|
|
|
|
|
|
|
|
const App: React.FC = () => {
|
|
|
|
const [active, setActive] = useState(false);
|
|
|
|
const [block, setBlock] = useState(false);
|
|
|
|
const [size, setSize] = useState<SizeType>('default');
|
2022-06-24 12:30:47 +08:00
|
|
|
const [buttonShape, setButtonShape] = useState<ButtonShapeType>('default');
|
2022-05-19 09:46:26 +08:00
|
|
|
const [avatarShape, setAvatarShape] = useState<AvatarShapeType>('circle');
|
|
|
|
|
|
|
|
const handleActiveChange = (checked: boolean) => {
|
|
|
|
setActive(checked);
|
2019-11-21 20:23:56 +08:00
|
|
|
};
|
|
|
|
|
2022-05-19 09:46:26 +08:00
|
|
|
const handleBlockChange = (checked: boolean) => {
|
|
|
|
setBlock(checked);
|
2019-11-21 20:23:56 +08:00
|
|
|
};
|
|
|
|
|
2022-05-19 09:46:26 +08:00
|
|
|
const handleSizeChange = (e: RadioChangeEvent) => {
|
|
|
|
setSize(e.target.value);
|
2021-06-10 00:38:55 +08:00
|
|
|
};
|
|
|
|
|
2022-05-19 09:46:26 +08:00
|
|
|
const handleShapeButton = (e: RadioChangeEvent) => {
|
|
|
|
setButtonShape(e.target.value);
|
2019-11-21 20:23:56 +08:00
|
|
|
};
|
|
|
|
|
2022-05-19 09:46:26 +08:00
|
|
|
const handleAvatarShape = (e: RadioChangeEvent) => {
|
|
|
|
setAvatarShape(e.target.value);
|
2019-11-21 20:23:56 +08:00
|
|
|
};
|
|
|
|
|
2022-05-19 09:46:26 +08:00
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<Space>
|
2021-06-10 00:38:55 +08:00
|
|
|
<Skeleton.Button active={active} size={size} shape={buttonShape} block={block} />
|
2022-05-19 09:46:26 +08:00
|
|
|
<Skeleton.Avatar active={active} size={size} shape={avatarShape} />
|
|
|
|
<Skeleton.Input active={active} size={size} />
|
|
|
|
</Space>
|
|
|
|
<br />
|
|
|
|
<br />
|
|
|
|
<Skeleton.Button active={active} size={size} shape={buttonShape} block={block} />
|
|
|
|
<br />
|
|
|
|
<br />
|
|
|
|
<Skeleton.Input active={active} size={size} block={block} />
|
|
|
|
<br />
|
|
|
|
<br />
|
|
|
|
<Skeleton.Image />
|
|
|
|
<Divider />
|
|
|
|
<Form layout="inline" style={{ margin: '16px 0' }}>
|
|
|
|
<Form.Item label="Active">
|
|
|
|
<Switch checked={active} onChange={handleActiveChange} />
|
|
|
|
</Form.Item>
|
|
|
|
<Form.Item label="Button and Input Block">
|
|
|
|
<Switch checked={block} onChange={handleBlockChange} />
|
|
|
|
</Form.Item>
|
|
|
|
<Form.Item label="Size">
|
|
|
|
<Radio.Group value={size} onChange={handleSizeChange}>
|
|
|
|
<Radio.Button value="default">Default</Radio.Button>
|
|
|
|
<Radio.Button value="large">Large</Radio.Button>
|
|
|
|
<Radio.Button value="small">Small</Radio.Button>
|
|
|
|
</Radio.Group>
|
|
|
|
</Form.Item>
|
|
|
|
<Form.Item label="Button Shape">
|
|
|
|
<Radio.Group value={buttonShape} onChange={handleShapeButton}>
|
2022-06-24 12:30:47 +08:00
|
|
|
<Radio.Button value="default">Default</Radio.Button>
|
2022-05-19 09:46:26 +08:00
|
|
|
<Radio.Button value="square">Square</Radio.Button>
|
|
|
|
<Radio.Button value="round">Round</Radio.Button>
|
|
|
|
<Radio.Button value="circle">Circle</Radio.Button>
|
|
|
|
</Radio.Group>
|
|
|
|
</Form.Item>
|
|
|
|
<Form.Item label="Avatar Shape">
|
|
|
|
<Radio.Group value={avatarShape} onChange={handleAvatarShape}>
|
|
|
|
<Radio.Button value="square">Square</Radio.Button>
|
|
|
|
<Radio.Button value="circle">Circle</Radio.Button>
|
|
|
|
</Radio.Group>
|
|
|
|
</Form.Item>
|
|
|
|
</Form>
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
};
|
2019-11-21 20:23:56 +08:00
|
|
|
|
2022-05-19 09:46:26 +08:00
|
|
|
export default App;
|
2019-11-21 20:23:56 +08:00
|
|
|
```
|