Ant Design（antd）基础入门

Ant Design 概述

1. 简介

Ant Design 是由阿里巴巴旗下蚂蚁金服团队开发的企业级 UI 设计语言和 React 实现的组件库。它致力于提高企业级中后台产品的用户体验，并提供统一、简洁、易用的设计和开发规范。

2. 设计理念

Ant Design 的设计理念主要包括以下几个方面：

1. 自然（Natural）
   • 符合直觉：设计方案符合用户的自然行为和心理预期，减少学习成本。
   • 高效输出：通过清晰的视觉层次、合理的布局、简洁的交互来提升用户的操作效率。
2. 一致（Consistent）
   • 视觉一致：保证产品在不同场景下的视觉风格一致。
   • 交互一致：保证产品在不同页面中的交互方式一致，减少用户的困惑和错误操作。
3. 简洁（Simple）
   • 简洁明了：设计风格简洁明了，不添加多余的装饰。
   • 专注核心：突出核心功能和内容，避免干扰用户的注意力。
4. 高效（Efficient）
   • 快速响应：保证系统的快速响应，提升用户体验。
   • 高效开发：提供高效的开发工具和组件，提升开发效率。

3. 目标

Ant Design 的目标是提供一套统一的企业级 UI 设计语言和高质量的 React 组件库，帮助开发者快速构建中后台应用，提高开发效率和用户体验。具体目标包括：

1. 提高用户体验

   • 通过一致性和简洁性的设计，提高用户的操作效率和满意度。
   • 提供丰富的组件和功能，满足各种业务场景的需求。

2. 提高开发效率

   • 提供高质量的组件库，减少开发者的工作量和时间成本。
   • 提供完善的文档和示例，帮助开发者快速上手和解决问题。

3. 保持技术领先

   • 不断迭代和优化，保持技术和设计的领先地位。
   • 关注社区和用户反馈，持续改进和完善产品。

4. 组件体系

Ant Design 提供了丰富的组件体系，覆盖了常见的中后台应用场景。组件体系主要包括：

1. 通用组件

   • Button 按钮
   • Icon 图标
   • Typography 排版
   • Grid 栅格

2. 布局组件

   • Layout 布局
   • Space 间距

3. 导航组件

   • Affix 固钉
   • Breadcrumb 面包屑
   • Dropdown 下拉菜单
   • Menu 菜单
   • Pagination 分页
   • Steps 步骤条

4. 数据录入组件

   • AutoComplete 自动完成
   • Checkbox 多选框
   • DatePicker 日期选择器
   • Form 表单
   • Input 输入框
   • Radio 单选框
   • Select 选择器
   • Slider 滑动输入条
   • Switch 开关
   • TimePicker 时间选择器
   • Upload 上传

5. 数据展示组件

   • Avatar 头像
   • Badge 徽标数
   • Calendar 日历
   • Card 卡片
   • Carousel 走马灯
   • Collapse 折叠面板
   • Descriptions 描述列表
   • Empty 空状态
   • List 列表
   • Popover 气泡卡片
   • Statistic 统计数值
   • Table 表格
   • Tabs 标签页
   • Tag 标签
   • Timeline 时间轴
   • Tooltip 文字提示
   • Tree 树形控件

6. 反馈组件

   • Alert 警告提示
   • Drawer 抽屉
   • Message 全局提示
   • Modal 对话框
   • Notification 通知提醒框
   • Progress 进度条
   • Result 结果
   • Spin 加载中
   • Skeleton 骨架屏

通过这些组件，开发者可以快速构建出功能丰富、界面美观的中后台应用，提升开发效率和用户体验。

结论

Ant Design 提供了一套完整的设计规范和高质量的组件库，致力于提高企业级中后台应用的用户体验和开发效率。通过学习和掌握 Ant Design 的设计理念和组件体系，开发者可以快速构建出一致性高、用户体验好的中后台应用。

安装与配置 Ant Design

1. 使用 create-react-app 创建新的 React 项目

create-react-app 是 Facebook 提供的一个工具，用于快速创建 React 项目。它包含了开发 React 应用所需的基本配置和脚手架。下面是使用 create-react-app 创建新项目的步骤：

1. 安装 create-react-app（如果尚未安装）：

   npm install -g create-react-app

2. 创建一个新的 React 项目：

   create-react-app my-ant-design-app

   这将会创建一个名为 my-ant-design-app 的文件夹，其中包含了 React 应用的基础结构和必要的配置文件。

3. 进入项目目录：

   cd my-ant-design-app

2. 安装 Ant Design

在创建好的 React 项目中，使用 npm 或 yarn 安装 Ant Design。这里使用 npm 作为示例：

1. 安装 Ant Design：

   npm install antd

3. 引入 Ant Design 样式

为了在项目中使用 Ant Design 提供的样式，需要在项目的入口文件中引入 Ant Design 的样式文件。通常，入口文件是 src/index.js 或 src/index.tsx（如果使用 TypeScript）。

1. 编辑 src/index.js 或 src/index.tsx 文件：

   import React from 'react';
   import ReactDOM from 'react-dom';
   import App from './App';
   import 'antd/dist/antd.css';  // 引入 Ant Design 样式
   
   ReactDOM.render(<App />, document.getElementById('root'));
   

4. 使用 Ant Design 组件

接下来，可以在项目的组件中使用 Ant Design 提供的组件。例如，在 src/App.js 文件中：

1. 编辑 src/App.js 文件：

   import React from 'react';
   import { Button, DatePicker } from 'antd';
   
   const App = () => {
     return (
       <div style={{ padding: '20px' }}>
         <h1>Welcome to Ant Design</h1>
         <Button type="primary">Primary Button</Button>
         <br /><br />
         <DatePicker />
       </div>
     );
   };
   
   export default App;
   

5. 运行项目

完成以上步骤后，可以运行项目，查看 Ant Design 组件的效果：

1. 启动项目：

   npm start

打开浏览器，访问 http://localhost:3000，你将会看到页面上显示的 Ant Design 组件，包括一个带有 Ant Design 样式的按钮和一个日期选择器。

总结

以上是如何在 React 项目中安装和配置 Ant Design 的详细步骤。通过使用 create-react-app 创建项目，安装 Ant Design 包，并在项目中引入其样式文件和组件，你可以快速在项目中使用 Ant Design 提供的丰富组件库，提升开发效率和用户体验。

组件基础

在 Ant Design 中，有很多常用组件，这里我们将重点介绍 Button 按钮、Icon 图标、Layout 布局、Grid 栅格和 Typography 排版组件的使用方法。你可以在官方文档中查看每个组件的详细示例代码，并在自己的项目中进行实践。

1. Button 按钮

Button 是最常用的组件之一，Ant Design 提供了多种类型和样式的按钮。

使用示例：

import React from 'react';
import { Button } from 'antd';

const App = () => (
  <div>
    <Button type="primary">Primary Button</Button>
    <Button>Default Button</Button>
    <Button type="dashed">Dashed Button</Button>
    <Button type="link">Link Button</Button>
  </div>
);

export default App;

官方文档： Button 按钮

2. Icon 图标

Icon 组件提供了一系列常用的图标，便于在项目中快速使用。

使用示例：

import React from 'react';
import { HomeOutlined, SettingOutlined } from '@ant-design/icons';

const App = () => (
  <div>
    <HomeOutlined style={{ fontSize: '24px', color: '#08c' }} />
    <SettingOutlined style={{ fontSize: '24px', color: '#08c' }} />
  </div>
);

export default App;

官方文档： Icon 图标

3. Layout 布局

Layout 组件用于快速搭建页面布局，包含了 Header、Footer、Sider、Content 等子组件。

使用示例：

import React from 'react';
import { Layout, Menu } from 'antd';

const { Header, Footer, Sider, Content } = Layout;

const App = () => (
  <Layout>
    <Header>
      <Menu theme="dark" mode="horizontal">
        <Menu.Item key="1">Home</Menu.Item>
        <Menu.Item key="2">About</Menu.Item>
        <Menu.Item key="3">Contact</Menu.Item>
      </Menu>
    </Header>
    <Layout>
      <Sider>Sider</Sider>
      <Content>Content</Content>
    </Layout>
    <Footer>Footer</Footer>
  </Layout>
);

export default App;

官方文档： Layout 布局

4. Grid 栅格

Grid 组件用于创建响应式布局，提供了 Row 和 Col 两个子组件。

使用示例：

import React from 'react';
import { Row, Col } from 'antd';

const App = () => (
  <div>
    <Row>
      <Col span={12}>col-12</Col>
      <Col span={12}>col-12</Col>
    </Row>
    <Row>
      <Col span={8}>col-8</Col>
      <Col span={8}>col-8</Col>
      <Col span={8}>col-8</Col>
    </Row>
  </div>
);

export default App;

官方文档： Grid 栅格

5. Typography 排版

Typography 组件用于处理文本的显示，包括标题、段落、文本等。

使用示例：

import React from 'react';
import { Typography } from 'antd';

const { Title, Paragraph, Text, Link } = Typography;

const App = () => (
  <Typography>
    <Title>Title</Title>
    <Paragraph>
      This is a paragraph with some <Text strong>strong text</Text> and a <Link href="#">link</Link>.
    </Paragraph>
    <Paragraph>
      This is another paragraph.
    </Paragraph>
  </Typography>
);

export default App;

官方文档： Typography 排版

实践建议

1. 查看官方文档：每个组件都有详细的使用说明和示例代码，可以帮助你快速了解组件的功能和用法。
2. 实际操作：在自己的项目中尝试使用这些组件，结合业务需求进行实践，以加深理解。
3. 代码阅读：阅读官方示例代码和文档中的代码片段，学习最佳实践和常见用法。
4. 动手实践：通过构建一个实际项目，进一步巩固对这些组件的理解和应用。

通过以上步骤，你将能够熟练掌握 Ant Design 的常用组件，并在项目中高效地应用它们。