本文详细介绍了AntDesign使用方法,包括安装、初始化项目、常用组件用法、样式与主题定制、响应式布局与适配以及表单与验证。通过丰富的示例和代码,帮助开发者快速掌握AntDesign的各项功能。
AntDesign介绍与安装Ant Design(简称AntD)是由蚂蚁金服开源的一套企业级UI设计语言与React组件库,它不仅提供了丰富的组件来帮助开发者构建界面,还注重用户体验和开发效率。Ant Design秉承了“以用户为中心”的设计理念,广泛应用于电商、金融、政务等多个领域。
安装Ant Design安装Ant Design有多种方式,常见的有NPM安装、Yarn安装和CDN引入。下面分别介绍这几种安装方法。
NPM安装
如果你的项目使用了NPM作为依赖管理工具,可以通过运行以下命令来安装Ant Design:
npm install antd --save
安装完成后,你可以在项目中引入Ant Design。
Yarn安装
如果你使用的是Yarn作为依赖管理工具,可以通过运行以下命令来安装Ant Design:
yarn add antd
安装完成后,同样可以在项目中引入Ant Design。
CDN引入
如果你不想使用NPM或Yarn来管理依赖,可以选择通过CDN引入Ant Design。在HTML文件中引入Ant Design CSS和JS文件:
<link rel="stylesheet" href="https://unpkg.com/antd/dist/antd.min.css">
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/antd/dist/antd.min.js"></script>
引入完成后,你可以在HTML中直接使用Ant Design的组件。
初始化Ant Design项目安装好Ant Design后,你还需要初始化一个Ant Design项目。这里以React项目为例,演示如何初始化并使用Ant Design。
创建React项目
首先,创建一个新的React项目。如果你还没有安装create-react-app
,可以通过以下命令全局安装:
npm install -g create-react-app
然后,创建一个新的React项目:
create-react-app my-antd-project
cd my-antd-project
安装Ant Design
在项目根目录下,运行以下命令安装Ant Design:
npm install antd --save
引入Ant Design
在src
目录下的index.js
或App.js
文件中,引入Ant Design:
import { ConfigProvider } from 'antd';
function App() {
return (
<ConfigProvider>
<div className="App">
Hello Ant Design
</div>
</ConfigProvider>
);
}
export default App;
在上述代码中,ConfigProvider
组件是一个配置提供者,它允许你在整个应用中设置和传递配置,如默认主题、语言等。
通过上述步骤,你已经成功安装并初始化了一个使用Ant Design的React项目。接下来可以开始使用Ant Design的各类组件来构建界面了。
常用组件使用方法Ant Design提供了丰富的组件库,包括按钮、表格、卡片、模态框等,这些组件可以帮助你快速构建功能完善的用户界面。本节将介绍一些常用的组件及其使用方法。
按钮组件按钮是界面中最常用的组件之一,Ant Design提供了多种样式的按钮供你选择,包括默认按钮、主要按钮、危险按钮等。
基本用法
import { Button } from 'antd';
function App() {
return (
<div>
<Button type="primary">主要按钮</Button>
<Button>默认按钮</Button>
<Button type="danger">危险按钮</Button>
</div>
);
}
export default App;
负责状态
按钮还可以显示不同的状态,如加载状态、禁用状态等。
import { Button } from 'antd';
function App() {
return (
<div>
<Button type="primary" loading>加载中</Button>
<Button type="primary" disabled>已禁用</Button>
</div>
);
}
export default App;
Icon按钮
按钮组件还可以结合图标使用,方便用户识别按钮的功能。
import { Button } from 'antd';
function App() {
return (
<div>
<Button type="primary" shape="circle" icon="plus" />
</div>
);
}
export default App;
表格组件
表格组件用于展示数据列表,支持分页、排序、筛选等功能。
基本用法
import { Table } from 'antd';
const columns = [
{
title: '姓名',
dataIndex: 'name',
key: 'name',
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
},
];
const data = [
{
name: '张三',
age: 24,
},
{
name: '李四',
age: 27,
},
];
function App() {
return (
<Table columns={columns} dataSource={data} />
);
}
export default App;
分页
表格组件支持分页显示数据,通过配置pagination
属性即可实现。
import { Table } from 'antd';
const columns = [
{
title: '姓名',
dataIndex: 'name',
key: 'name',
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
},
];
const data = [
{
name: '张三',
age: 24,
},
{
name: '李四',
age: 27,
},
];
function App() {
return (
<Table columns={columns} dataSource={data} pagination={{ pageSize: 10 }} />
);
}
export default App;
卡片组件
卡片组件常用于展示数据或图片,使得信息更加清晰易读。
基本用法
import { Card } from 'antd';
function App() {
return (
<Card title="标题" extra={<a href="">更多</a>}>
<p>卡片内容</p>
</Card>
);
}
export default App;
配置卡片头和卡片尾
可以通过headStyle
和bodyStyle
属性来配置卡片的头部和主体部分的样式。
import { Card } from 'antd';
function App() {
return (
<Card
title="标题"
headStyle={{ color: '#f50' }}
bodyStyle={{ color: '#00f' }}
>
<p>卡片内容</p>
</Card>
);
}
export default App;
模态框组件
模态框组件用于显示需要用户输入信息的对话框,支持多种形式的输入,如输入框、选择器等。
基本用法
import { Modal } from 'antd';
import React, { useState } from 'react';
function App() {
const [visible, setVisible] = useState(false);
const showModal = () => {
setVisible(true);
};
const handleOk = () => {
setVisible(false);
};
const handleCancel = () => {
setVisible(false);
};
return (
<div>
<button type="button" onClick={showModal}>显示模态框</button>
<Modal
title="模态框标题"
visible={visible}
onOk={handleOk}
onCancel={handleCancel}
>
<p>模态框内容</p>
</Modal>
</div>
);
}
export default App;
配置遮罩层和标题
可以通过配置mask
属性来控制是否显示遮罩层,通过配置title
属性来设置标题。
import { Modal } from 'antd';
import React, { useState } from 'react';
function App() {
const [visible, setVisible] = useState(false);
const showModal = () => {
setVisible(true);
};
const handleOk = () => {
setVisible(false);
};
const handleCancel = () => {
setVisible(false);
};
return (
<div>
<button type="button" onClick={showModal}>显示模态框</button>
<Modal
title="模态框标题"
visible={visible}
onOk={handleOk}
onCancel={handleCancel}
mask={false}
closable={false}
>
<p>模态框内容</p>
</Modal>
</div>
);
}
export default App;
小结
通过本节的学习,你已经掌握了Ant Design中一些常用组件的基本用法,如按钮、表格、卡片和模态框等。这些组件可以帮助你快速构建功能完善的用户界面。更多组件的详细用法请参考Ant Design官方文档。
AntDesign样式与主题定制Ant Design不仅提供了丰富的组件库,还支持样式与主题的定制。通过定制样式与主题,你可以根据项目需求调整组件的外观,使应用界面更加符合设计规范。
使用CSS变量进行定制Ant Design使用CSS变量来控制组件的默认样式。通过覆盖这些变量,你可以改变组件的颜色、字体等属性。
基本用法
首先,定义一个样式文件,如custom-variables.css
,并在其中覆盖CSS变量:
:root {
--primary-color: #1890ff; /* 主要颜色 */
--success-color: #52c41a; /* 成功颜色 */
}
然后在项目中引入这个样式文件:
import 'antd/dist/antd.css';
import './custom-variables.css';
function App() {
return (
<div>
<Button type="primary">主要按钮</Button>
</div>
);
}
export default App;
自定义主题
你还可以通过Ant Design的ThemeProvider
组件来自定义主题,覆盖全局样式的颜色、字体等属性。
import { ThemeProvider } from 'antd';
import React from 'react';
function App() {
return (
<ThemeProvider
theme={{
token: {
colorPrimary: '#1890ff',
colorPrimaryHover: '#0052cc',
},
}}
>
<Button type="primary">主要按钮</Button>
</ThemeProvider>
);
}
export default App;
使用Less变量进行定制
Ant Design还提供了使用Less变量来定制样式的能力。通过覆盖Less变量,你可以更灵活地调整组件的样式。
基本用法
首先,定义一个.less
样式文件,如custom.less
,并在其中覆盖Less变量:
@primary-color: #1890ff;
@success-color: #52c41a;
@import '~antd/dist/antd.less';
然后在项目中引入这个样式文件:
import './custom.less';
function App() {
return (
<div>
<Button type="primary">主要按钮</Button>
</div>
);
}
export default App;
复杂定制
你还可以通过覆盖更多的Less变量来实现更复杂的样式定制。
@primary-color: #1890ff;
@success-color: #52c41a;
@import '~antd/dist/antd.less';
@btn-primary-bg: @primary-color;
@btn-primary-color: white;
@btn-primary-hover-bg: darken(@btn-primary-bg, 10%);
@btn-primary-hover-color: white;
通过CSS自定义样式
除了使用CSS变量和Less变量,你还可以直接通过CSS覆盖组件的样式。
基本用法
在项目的CSS文件中定义覆盖样式:
.ant-btn-primary {
background-color: #1890ff !important;
border-color: #1890ff !important;
}
然后在项目中引入这个样式文件:
import './custom-style.css';
function App() {
return (
<div>
<Button type="primary">主要按钮</Button>
</div>
);
}
export default App;
组件内部样式
你还可以在组件内部使用CSS模块化来覆盖样式。
import React from 'react';
import styles from './App.module.css';
function App() {
return (
<div className={styles['ant-btn-primary']}>
<Button type="primary">主要按钮</Button>
</div>
);
}
export default App;
/* App.module.css */
.ant-btn-primary {
background-color: #1890ff !important;
border-color: #1890ff !important;
}
小结
通过本节的学习,你已经掌握了使用CSS变量、Less变量以及直接通过CSS覆盖样式来定制Ant Design组件的方法。这些方法可以帮助你根据项目需求调整组件的外观,使应用界面更加符合设计规范。更多定制样式的细节,请参考Ant Design的官方文档。
响应式布局与适配在现代Web应用开发中,响应式布局是一个重要的设计原则,它能够让应用在不同设备和屏幕尺寸上保持良好的用户体验。Ant Design提供了多种功能来帮助开发者实现响应式布局和适配。
响应式布局Ant Design提供了多种响应式布局组件来适应不同的屏幕尺寸。这些组件可以自动调整布局,在不同的设备上显示不同的样式。
基本用法
Ant Design中的响应式布局组件通常使用栅格系统来实现。以下是一个简单的响应式布局示例:
import { Row, Col, Button } from 'antd';
import React from 'react';
function App() {
return (
<Row>
<Col span={24}>
<Button type="primary">按钮</Button>
</Col>
</Row>
);
}
export default App;
响应式栅格布局
Ant Design还提供了栅格布局组件,支持响应式布局。你可以根据屏幕宽度调整列的宽度和偏移量。
import { Row, Col, Button } from 'antd';
import React from 'react';
function App() {
return (
<Row>
<Col span={12} lg={6} md={8} sm={12} xs={24}>
<Button type="primary">按钮</Button>
</Col>
<Col span={12} lg={18} md={16} sm={12} xs={24}>
<Button type="primary">按钮</Button>
</Col>
</Row>
);
}
export default App;
适配
除了响应式布局,Ant Design还提供了多种适配功能,帮助开发者在不同的设备上实现一致的用户体验。
媒体查询
Ant Design支持使用CSS媒体查询来实现不同屏幕尺寸下的样式适配。例如,可以通过媒体查询设置不同屏幕尺寸下的字体大小、布局等。
/* custom.css */
@media screen and (max-width: 768px) {
.ant-btn-primary {
font-size: 14px;
}
}
在项目中引入这个样式文件:
import './custom.css';
function App() {
return (
<div>
<Button type="primary">按钮</Button>
</div>
);
}
export default App;
Flexbox布局
使用Flexbox布局可以帮助你更灵活地调整组件在不同屏幕尺寸下的布局。
import { Row, Col, Button } from 'antd';
import React from 'react';
function App() {
return (
<Row justify="space-around" align="middle">
<Col>
<Button type="primary">按钮</Button>
</Col>
<Col>
<Button type="primary">按钮</Button>
</Col>
</Row>
);
}
export default App;
Flex布局组件
Ant Design还提供了一些专门的Flex布局组件,如Flex
, Space
等,可以方便地实现响应式布局。
import { Flex, Button } from 'antd';
import React from 'react';
function App() {
return (
<Flex>
<Button type="primary">按钮</Button>
<Button type="primary">按钮</Button>
<Button type="primary">按钮</Button>
</Flex>
);
}
export default App;
小结
通过本节的学习,你已经掌握了Ant Design中实现响应式布局和适配的方法。这些方法可以帮助你在不同设备和屏幕尺寸上保持一致的用户体验。更多响应式布局和适配的细节,请参考Ant Design的官方文档。
AntDesign表单与验证在Web应用开发中,表单是一个非常重要的组件,它用于收集用户数据。Ant Design提供了丰富的表单组件和验证功能,可以帮助开发者快速构建功能完善的表单。
基本表单Ant Design中使用Form
组件创建表单,通过设置Form
组件的属性和方法,可以实现表单的创建和提交。
创建表单
import { Form, Input, Button, message } from 'antd';
import React, { useState } from 'react';
function App() {
const [form] = Form.useForm();
const onFinish = (values) => {
console.log('Received values of form: ', values);
};
return (
<Form form={form} onFinish={onFinish}>
<Form.Item name="username" label="用户名" rules={[{ required: true, message: '请输入用户名' }]}>
<Input />
</Form.Item>
<Form.Item name="password" label="密码" rules={[{ required: true, message: '请输入密码' }]}>
<Input.Password />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">提交</Button>
</Form.Item>
</Form>
);
}
export default App;
表单分步
对于复杂的表单,可以使用Form
组件的分步功能,实现多步骤表单。
import { Form, Input, Button, Steps, Step } from 'antd';
import React, { useState } from 'react';
const steps = [
{ title: '基本信息', content: <Input placeholder="请输入基本信息" /> },
{ title: '联系方式', content: <Input placeholder="请输入联系方式" /> },
];
function App() {
const [form] = Form.useForm();
const [current, setCurrent] = useState(0);
const next = () => {
setCurrent(current + 1);
};
const prev = () => {
setCurrent(current - 1);
};
const onFinish = (values) => {
console.log('Received values of form: ', values);
};
return (
<Form form={form} onFinish={onFinish}>
<Steps current={current}>
{steps.map((item) => (
<Step key={item.title} title={item.title} />
))}
</Steps>
<Form.Item noStyle>
{steps[current].content}
</Form.Item>
<Form.Item>
<Button type="primary" onClick={next} disabled={current === steps.length - 1}>
下一步
</Button>
{current > 0 && (
<Button onClick={prev}>
上一步
</Button>
)}
</Form.Item>
</Form>
);
}
export default App;
表单验证
Ant Design提供了丰富的表单验证规则,帮助开发者实现表单的数据校验。
简单验证
import { Form, Input, Button } from 'antd';
import React, { useState } from 'react';
function App() {
const [form] = Form.useForm();
const onFinish = (values) => {
console.log('Received values of form: ', values);
};
return (
<Form form={form} onFinish={onFinish}>
<Form.Item
name="username"
label="用户名"
rules={[
{ required: true, message: '请输入用户名' },
{ min: 4, message: '用户名至少为4个字符' },
]}
>
<Input />
</Form.Item>
<Form.Item
name="password"
label="密码"
rules={[
{ required: true, message: '请输入密码' },
{ min: 6, message: '密码至少为6个字符' },
]}
>
<Input.Password />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">提交</Button>
</Form.Item>
</Form>
);
}
export default App;
自定义验证
除了内置的验证规则,Ant Design还支持自定义验证函数,实现更复杂的验证逻辑。
import { Form, Input, Button } from 'antd';
import React, { useState } from 'react';
function App() {
const [form] = Form.useForm();
const onFinish = (values) => {
console.log('Received values of form: ', values);
};
const validateUsername = (rule, value) => {
if (!value) {
return Promise.reject(new Error('请输入用户名'));
}
if (value.length < 4) {
return Promise.reject(new Error('用户名至少为4个字符'));
}
return Promise.resolve();
};
return (
<Form form={form} onFinish={onFinish}>
<Form.Item
name="username"
label="用户名"
rules={[
{ required: true, message: '请输入用户名' },
{ validator: validateUsername },
]}
>
<Input />
</Form.Item>
<Form.Item
name="password"
label="密码"
rules={[
{ required: true, message: '请输入密码' },
{ min: 6, message: '密码至少为6个字符' },
]}
>
<Input.Password />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">提交</Button>
</Form.Item>
</Form>
);
}
export default App;
依赖验证
Ant Design还支持依赖验证,即一个字段的验证依赖于另一个字段的值。
import { Form, Input, Button } from 'antd';
import React, { useState } from 'react';
function App() {
const [form] = Form.useForm();
const onFinish = (values) => {
console.log('Received values of form: ', values);
};
const validateConfirmPassword = (rule, value) => {
if (!value || value !== form.getFieldValue('password')) {
return Promise.reject('两次输入的密码不一致');
}
return Promise.resolve();
};
return (
<Form form={form} onFinish={onFinish}>
<Form.Item
name="password"
label="密码"
rules={[
{ required: true, message: '请输入密码' },
{ min: 6, message: '密码至少为6个字符' },
]}
>
<Input.Password />
</Form.Item>
<Form.Item
name="confirmPassword"
label="确认密码"
dependencies={['password']}
rules={[
{ required: true, message: '请输入确认密码' },
{ validator: validateConfirmPassword },
]}
>
<Input.Password />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">提交</Button>
</Form.Item>
</Form>
);
}
export default App;
表单提交
Ant Design提供了多种方式来提交表单数据,包括使用onFinish
回调函数、表单实例的validateFields
方法等。
使用onFinish
回调函数
import { Form, Input, Button } from 'antd';
import React, { useState } from 'react';
function App() {
const [form] = Form.useForm();
const onFinish = (values) => {
console.log('Received values of form: ', values);
};
return (
<Form form={form} onFinish={onFinish}>
<Form.Item
name="username"
label="用户名"
rules={[{ required: true, message: '请输入用户名' }]}
>
<Input />
</Form.Item>
<Form.Item
name="password"
label="密码"
rules={[{ required: true, message: '请输入密码' }]}
>
<Input.Password />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">提交</Button>
</Form.Item>
</Form>
);
}
export default App;
使用validateFields
方法
import { Form, Input, Button } from 'antd';
import React, { useState } from 'react';
function App() {
const [form] = Form.useForm();
const handleSubmit = () => {
form.validateFields()
.then(values => {
console.log('Received values of form: ', values);
})
.catch(errorInfo => {
console.log('Validate failed: ', errorInfo);
});
};
return (
<Form form={form}>
<Form.Item
name="username"
label="用户名"
rules={[{ required: true, message: '请输入用户名' }]}
>
<Input />
</Form.Item>
<Form.Item
name="password"
label="密码"
rules={[{ required: true, message: '请输入密码' }]}
>
<Input.Password />
</Form.Item>
<Form.Item>
<Button type="primary" onClick={handleSubmit}>提交</Button>
</Form.Item>
</Form>
);
}
export default App;
小结
通过本节的学习,你已经掌握了Ant Design中创建和提交表单的方法,以及表单的验证规则。这些功能可以帮助你快速构建功能完善的表单。更多表单的详细用法,请参考Ant Design的官方文档。
AntDesign项目实践案例为了帮助你更好地理解Ant Design在实际项目中的应用,本节将通过一个简单的项目案例来演示如何使用Ant Design构建一个完整的应用。这个应用是一个简单的任务管理器,用户可以添加、编辑和删除任务。
项目结构首先,我们定义项目的结构。假设项目根目录下包含以下文件和文件夹:
my-task-manager/
├── src/
│ ├── components/
│ │ ├── TaskList.js
│ │ └── TaskForm.js
│ ├── App.js
│ └── index.js
├── public/
│ └── index.html
├── package.json
└── README.md
TaskList.js
:任务列表组件,用于显示任务列表和操作按钮。TaskForm.js
:任务表单组件,用于添加和编辑任务。App.js
:应用的主要入口文件。index.js
:React应用的入口文件。
TaskList组件用于显示任务列表,并提供添加和删除任务的功能。
// TaskList.js
import { List, Button, Space, Typography } from 'antd';
import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
import React, { useState } from 'react';
const TaskList = ({ tasks, onTaskDelete, onTaskEdit }) => {
const [isModalVisible, setIsModalVisible] = useState(false);
const showModal = () => {
setIsModalVisible(true);
};
const handleOk = () => {
setIsModalVisible(false);
};
const handleCancel = () => {
setIsModalVisible(false);
};
return (
<div>
<List
dataSource={tasks}
renderItem={item => (
<List.Item
actions={[
<Button icon={<EditOutlined />} onClick={onTaskEdit(item.id)}>编辑</Button>,
<Button icon={<DeleteOutlined />} onClick={() => onTaskDelete(item.id)}>删除</Button>,
]}
>
<Typography.Text>{item.title}</Typography.Text>
</List.Item>
)}
/>
<Button type="primary" onClick={showModal}>添加任务</Button>
<Modal
title="添加任务"
visible={isModalVisible}
onOk={handleOk}
onCancel={handleCancel}
>
<TaskForm onTaskAdd={tasks => console.log(tasks)} />
</Modal>
</div>
);
};
export default TaskList;
TaskForm组件
TaskForm组件用于添加和编辑任务,并进行表单验证。
// TaskForm.js
import { Form, Input, Button, Modal } from 'antd';
import React, { useState } from 'react';
const TaskForm = ({ id, onTaskUpdate, onTaskAdd }) => {
const [form] = Form.useForm();
const onFinish = (values) => {
if (id) {
onTaskUpdate(values);
} else {
onTaskAdd(values);
}
form.resetFields();
};
return (
<Form form={form} onFinish={onFinish}>
<Form.Item
name="title"
label="任务标题"
rules={[{ required: true, message: '请输入任务标题' }]}
>
<Input />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">提交</Button>
</Form.Item>
</Form>
);
};
export default TaskForm;
App组件
App组件是应用的主要入口文件,负责管理任务数据并调用TaskList和TaskForm组件。
// App.js
import React, { useState } from 'react';
import TaskList from './components/TaskList';
import TaskForm from './components/TaskForm';
const App = () => {
const [tasks, setTasks] = useState([
{ id: 1, title: '任务1' },
{ id: 2, title: '任务2' },
]);
const addTask = (task) => {
setTasks([...tasks, { id: tasks.length + 1, title: task.title }]);
};
const deleteTask = (id) => {
setTasks(tasks.filter(task => task.id !== id));
};
const editTask = (id) => {
const newTasks = tasks.map(task => task.id === id ? { ...task, editing: true } : task);
setTasks(newTasks);
};
const updateTask = (updatedTask) => {
setTasks(tasks.map(task => task.id === updatedTask.id ? { ...task, ...updatedTask, editing: false } : task));
};
const renderTasks = () => {
return tasks.map(task => (
<TaskForm key={task.id} id={task.id} onTaskAdd={addTask} onTaskUpdate={updateTask} />
));
};
return (
<div>
<TaskList tasks={tasks} onTaskDelete={deleteTask} onTaskEdit={editTask} />
{renderTasks()}
</div>
);
};
export default App;
项目入口文件
项目的入口文件通常位于src/index.js
,用于启动React应用。
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
运行项目
要运行项目,首先确保已经安装了所有依赖包。在项目的根目录下,运行以下命令:
npm install
npm start
现在,你可以访问localhost:3000
来查看项目运行情况。通过上述代码,你已经成功构建了一个简单的任务管理器应用,使用了Ant Design的各种组件和功能。这个案例展示了如何使用Ant Design构建一个功能完整的应用。
通过本节的项目实践案例,你已经了解了如何使用Ant Design构建一个简单的任务管理器应用。这个案例涉及到了Ant Design中的一些核心组件,如表单、列表、模态框等。更多实践案例和详细的组件用法,请参考Ant Design的官方文档。
共同学习,写下你的评论
评论加载中...
作者其他优质文章