从0开始学前端 第五十八课：Ant Design的使用

第五十八课：Ant Design的使用

学习目标

在本课程中，您将学习以下内容：

1. 了解Ant Design（简称Antd）是什么，以及它为什么流行。
2. 学习如何在项目中安装和配置Ant Design。
3. 掌握Ant Design的基本组件使用，如按钮（Button）、输入框（Input）和网格系统（Grid）。
4. 学习如何通过Ant Design的布局组件创建响应式页面。
5. 了解Ant Design的表单组件，学习如何收集和处理用户输入。

学习内容

1. 什么是Ant Design

Ant Design是一套由阿里巴巴团队维护的企业级UI设计语言和React组件库。它提供了一系列高质量的React组件，非常适合开发和服务于企业级后台产品。

概念解释：

• UI设计语言：一套设计标准和原则，帮助开发者和设计师创建一致的用户界面。

2. 安装和配置

安装Ant Design：

npm install antd

在项目中引入Ant Design样式：

import 'antd/dist/antd.css'; // 或者 antd.less

3. 基本组件使用

按钮（Button）：

import { Button } from 'antd';

ReactDOM.render(<Button type="primary">Primary Button</Button>, mountNode);

预计输出效果：页面上会展示一个蓝色的主要按钮。

输入框（Input）：

import { Input } from 'antd';

ReactDOM.render(<Input placeholder="Basic usage" />, mountNode);

预计输出效果：页面上会有一个带有灰色占位符"Basic usage"的输入框。

网格系统（Grid）：

import { Row, Col } from 'antd';

ReactDOM.render(
  <Row>
    <Col span={12}>col-12</Col>
    <Col span={12}>col-12</Col>
  </Row>,
  mountNode,
);

预计输出效果：创建了一个两列各占一半宽度的行。

4. 布局组件和响应式设计

Ant Design提供了Layout组件来帮助你构建页面布局。

import { Layout, Menu, Breadcrumb } from 'antd';

const { Header, Content, Footer } = Layout;

ReactDOM.render(
  <Layout className="layout">
    <Header>
      <div className="logo" />
      <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
        <Menu.Item key="1">nav 1</Menu.Item>
        <Menu.Item key="2">nav 2</Menu.Item>
        <Menu.Item key="3">nav 3</Menu.Item>
      </Menu>
    </Header>
    <Content style={{ padding: '0 50px' }}>
      <Breadcrumb style={{ margin: '16px 0' }}>
        <Breadcrumb.Item>Home</Breadcrumb.Item>
        <Breadcrumb.Item>List</Breadcrumb.Item>
        <Breadcrumb.Item>App</Breadcrumb.Item>
      </Breadcrumb>
      <div className="site-layout-content">Content</div>
    </Content>
    <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
  </Layout>,
  mountNode,
);

预计输出效果：一个具有头部导航、面包屑导航和底部信息的页面布局。

5. 表单组件

Ant Design的Form组件可以与Input等其他表单控件一起使用，以便收集和处理用户输入。

import { Form, Input, Button } from 'antd';

const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};

const Demo = () => {
  const onFinish = (values) => {
    console.log('Success:', values);
  };

  return (
    <Form {...layout} name="nest-messages" onFinish={onFinish}>
      <Form.Item name={['user', 'name']} label="Name" rules={[{ required: true }]}>
        <Input />
      </Form.Item>
      <Form.Item name={['user', 'email']} label="Email" rules={[{ type: 'email' }]}>
        <Input />
      </Form.Item>
      <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

ReactDOM.render(<Demo />, mountNode);

预计输出效果：一个带有姓名和电子邮件输入框的表单，以及一个提交按钮。

课后练习

1. 使用Ant Design的Button组件创建一个页面，包括不同类型和大小的按钮。
2. 构建一个使用Grid系统的响应式布局页面，包含Header、Content和Footer。
3. 创建一个包含各种类型输入框（比如文本、密码、数字等）的表单，并使用Form组件对输入进行验证。

练习解析：
这些练习将帮助你熟悉Ant Design的基本UI组件，并实践它们在实际项目中的应用。通过构建布局和表单，你将能够理解组件如何协同工作，从而创建出既美观又实用的界面。记住，最好的学习方法是动手实践，所以不要害怕尝试并犯错误！

---

章节目录
第五十九课：ES6及更高版本的JavaScript新特性