一、安装AntD
yarn add antd
二、引入AntD的CSS样式
import "antd/dist/antd.css"
三、在官方文档寻找自己需要的组件并使用
例如：Button
先import组件到页面
import { Button
} from "antd"
直接使用
function Demo(){
return (
<>
<Button type
="primary">主按钮
</Button
>
<Button
>次按钮
</Button
>
</>
)
}
例如：Form
先import组件到页面
import { Form
, Input
, Button
, checkbox
} from "antd"
直接使用
const layout = {
labelCol: { span: 8 },
wrapperCol: { span: 16 }
}
const tailLayout = {
wrapperCol: { offset: 8, span: 16 }
}
const Demo = () => {
const onFinish = values => {
console.log("Success:", values)
}
const onFinishFailed = errorInfo => {
console.log("Failed:", errorInfo)
}
return (
<Form
{...layout}
name="basic"
initialValues={{
remember: true,
}}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
>
<Form.Item
label="Username"
name="username"
rules={[
{
required: true,
message: "Please input your username!",
},
]}
>
<Input/>
</Form.Item>
<Form.Item
label="Password"
name="password"
rules={[
{
required: true,
message: "Please input your password!",
},
]}
>
<Input.Password/>
</Form.Item>
<Form.Item {...tailLayout} name="remember" valuePropName="checked">
<Checkbox>Remember me</Checkbox>
</Form.Item>
<Form.Item {...tailLayout}>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
)
}
修改里面的参数达到自己的效果
