Ant Design -岩石教程

主要特点

1. 丰富的组件库

Ant Design 提供了大量的基础和高级组件，涵盖表单、表格、图标、按钮、对话框等多种常用 UI 组件，满足不同场景的需求。

2. 完善的设计规范

基于 Ant Design 设计体系，提供了一套完整的设计规范和最佳实践，确保界面一致性和美观性。

3. 强大的主题定制功能

Ant Design 支持全局和局部的主题定制，开发者可以根据项目需求轻松调整主题色、字体、间距等样式。

4. 国际化支持

内置多语言支持，开发者可以方便地进行国际化配置，满足全球用户的需求。

5. 优秀的文档和社区支持

Ant Design 拥有详尽的官方文档和活跃的社区支持，开发者可以从中获取丰富的资源和帮助。

安装

使用 npm 或 yarn 安装 Ant Design。

npm install antd

或

yarn add antd

基本用法

引入组件

可以按需引入组件来使用。

import React from 'react';
import { Button } from 'antd';
import 'antd/dist/antd.css';

function App() {
  return (
    <Button type="primary">Hello World</Button>
  );
}

export default App;

使用 Form 组件

Ant Design 提供了强大的表单组件，支持表单验证、动态表单等功能。

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

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

const tailLayout = {
  wrapperCol: { offset: 8, span: 16 },
};

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

  const onFinishFailed = errorInfo => {
    console.log('Failed:', errorInfo);
  };

  return (
    <Form
      {...layout}
      name="basic"
      initialValues={{ remember: true }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
    >
      <Form.Item
        label="Username"
        name="username"
        rules={[{ required: true, message: 'Please input your username!' }]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="Password"
        name="password"
        rules={[{ required: true, message: 'Please input your password!' }]}
      >
        <Input.Password />
      </Form.Item>

      <Form.Item {...tailLayout}>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

export default Demo;

使用 Table 组件

Ant Design 提供了强大的表格组件，支持排序、筛选、分页等功能。

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

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

const data = [
  {
    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',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
  },
];

const App = () => {
  return <Table columns={columns} dataSource={data} />;
};

export default App;

配置主题

通过配置文件自定义主题色。

import { ConfigProvider } from 'antd';
import zhCN from 'antd/lib/locale/zh_CN';
import 'antd/dist/antd.variable.min.css';

ConfigProvider.config({
  theme: {
    primaryColor: '#1DA57A',
  },
});

function App() {
  return (
    <ConfigProvider locale={zhCN}>
      <Button type="primary">Hello World</Button>
    </ConfigProvider>
  );
}

export default App;

官方资料

更多详细信息和教程，请参考 Ant Design 的官方文档：