--- order: 2.1 title: zh-CN: 按钮/头像/输入框/图像 en-US: Button/Avatar/Input/Image --- ## zh-CN 骨架按钮、头像、输入框和图像。 ## en-US Skeleton Button, Avatar, Input and Image. ```tsx import type { RadioChangeEvent } from 'antd'; import { Divider, Form, Radio, Skeleton, Space, Switch } from 'antd'; import React, { useState } from 'react'; type SizeType = 'default' | 'small' | 'large'; type ButtonShapeType = 'circle' | 'square' | 'round' | 'default'; type AvatarShapeType = 'circle' | 'square'; const App: React.FC = () => { const [active, setActive] = useState(false); const [block, setBlock] = useState(false); const [size, setSize] = useState('default'); const [buttonShape, setButtonShape] = useState('default'); const [avatarShape, setAvatarShape] = useState('circle'); const handleActiveChange = (checked: boolean) => { setActive(checked); }; const handleBlockChange = (checked: boolean) => { setBlock(checked); }; const handleSizeChange = (e: RadioChangeEvent) => { setSize(e.target.value); }; const handleShapeButton = (e: RadioChangeEvent) => { setButtonShape(e.target.value); }; const handleAvatarShape = (e: RadioChangeEvent) => { setAvatarShape(e.target.value); }; return ( <>





Default Large Small Default Square Round Circle Square Circle
); }; export default App; ```