ReactJS UI Ant Design 组件介绍

Ant Design 是蚂蚁金服开源的一套企业级 UI 设计语言和 React 组件库。它提供了一整套优雅美观的组件，使开发者快速开发出高质量的 Web 应用程序。 Ant Design 的组件包括了丰富的表单控件、图表、表格、导航、布局等，可帮助开发人员更快、更好地实现 Web 应用程序中的交互和动画效果。

常用组件介绍

Button

Button 是 Ant Design 中最基础的组件之一，提供了多种属性和状态（如：按钮类型，大小，颜色，图标，禁用等）。

import { Button } from 'antd';

<Button type="primary" size="large" icon={<SearchOutlined />}>
  搜索
</Button>

Input

Input 是 Ant Design 的另一款基础组件，是用户输入信息的主要方式之一，提供了多种类型和事件（如：输入框类型，大小，前后缀，可清空、可搜索等）。

import { Input } from 'antd';

<Input placeholder="请输入搜索内容" allowClear />

Icon

Icon 是 Ant Design 的图标组件，提供了常见的图标，如箭头、搜索、日期等。同时支持自定义 SVG 和字体图标。

import { SmileOutlined } from '@ant-design/icons';

<SmileOutlined />

Modal

Modal 是 Ant Design 的模态框组件，提供了多种模态框类型和布局（如：确认框、信息框、成功框、错误框等）。

import { Modal } from 'antd';

<Modal
  title="Basic Modal"
  visible={visible}
  onOk={handleOk}
  onCancel={handleCancel}
>
  <p>Some contents...</p>
</Modal>

Table

Table 是 Ant Design 的表格组件，提供了多种表格类型和配置（如：分页、排序、筛选、编辑等）。

import { Table } from 'antd';

const dataSource = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
  },
];

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
];

<Table dataSource={dataSource} columns={columns} />;

安装

首先需要通过 npm 安装 Ant Design：

$ npm install antd --save

然后，需要使用 babel-plugin-import 按需加载组件代码和样式。

$ npm install babel-plugin-import --save-dev

在 .babelrc 文件中进行配置：

{
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "libraryDirectory": "es",
        "style": "css"
      }
    ]
  ]
}

最后在需要使用组件的文件中引入，并使用即可。

import { Button } from 'antd';

总结

Ant Design 是一款优秀的 UI 库，提供了众多高质量的组件，能极大地提高 Web 应用的开发效率和用户体验。开发人员应学习并熟练使用其中常见的组件，以实现快速开发和良好的用户交互体验。