Ant Design 提供了丰富的样式和组件，可以让你更快速地构建响应式、移动友好的网站和应用程序。它支持所有主流浏览器，并提供了易于使用的模板和工具，以帮助你开始构建项目。
下面我们来看一下如何使用 Ant Design 构建一个简单的页面：
第一步：安装 Ant Design
首先，在项目中安装 Ant Design 库：
npm install antd --save
第二步：引入样式
在 App.js 文件中引入 Ant Design 样式：
import 'antd/dist/antd.css';
第三步：创建容器
在 React 中创建一个容器，作为页面的主体：
import React from 'react'; import { Button } from 'antd'; function App() { return ( <div> <Button type="primary">Click Me</Button> </div> ); } export default App;
在这个例子中，我们使用 Ant Design 的按钮组件创建了一个按钮。
第四步：添加组件
使用 Ant Design 的各种组件来增强页面的功能和外观。例如，可以添加导航栏、表格、对话框等。
import React, { useState } from 'react'; import { Layout, Menu, Table, Modal, Form, Input, Button } from 'antd'; const { Header, Content, Footer } = Layout; function App() { const [modalVisible, setModalVisible] = useState(false); const [form] = Form.useForm(); const tableData = [ { key: '1', name: 'John Doe', age: 32, address: 'New York No. 1 Lake Park' }, { key: '2', name: 'Jane Smith', age: 28, address: 'London No. 1 Lake Park' }, { key: '3', name: 'Jim Green', age: 36, address: 'Sidney No. 1 Lake Park' }, ]; const handleOk = () => { form.submit(); setModalVisible(false); }; const handleCancel = () => { form.resetFields(); setModalVisible(false); }; const columns = [ { title: 'Name', dataIndex: 'name', key: 'name' }, { title: 'Age', dataIndex: 'age', key: 'age' }, { title: 'Address', dataIndex: 'address', key: 'address' }, ]; return ( <Layout className="layout"> <Header> <div className="logo" /> <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']}> <Menu.Item key="1">Home</Menu.Item> <Menu.Item key="2">About</Menu.Item> <Menu.Item key="3">Contact</Menu.Item> </Menu> </Header> <Content style={{ padding: '0 50px' }}> <div className="site-layout-content"> <Button type="primary" onClick={() => setModalVisible(true)}>Add Row</Button> <Table dataSource={tableData} columns={columns} /> <Modal title="Add Row" visible={modalVisible} onOk={handleOk} onCancel={handleCancel}> <Form form={form}> <Form.Item label="Name" name="name"> <Input /> </Form.Item> <Form.Item label="Age" name="age"> <Input /> </Form.Item> <Form.Item label="Address" name="address"> <Input /> </Form.Item> </Form> </Modal> </div> </Content> <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer> </Layout> ); } export default App;
在这个例子中，我们添加了一个水平导航栏、一个表格和一个对话框。
