Ant Design 简介 #

┌─────────────────────────────────────────┐
│           Ant Design 架构                │
├─────────────────────────────────────────┤
│  设计价值观                              │
│  ├── 自然                               │
│  ├── 确定性                             │
│  ├── 意义感                             │
│  └── 生长性                             │
├─────────────────────────────────────────┤
│  设计原则                                │
│  ├── 亲密性                             │
│  ├── 对齐                               │
│  ├── 对比                               │
│  ├── 重复                               │
│  └── 直截了当                           │
├─────────────────────────────────────────┤
│  组件库                                  │
│  ├── 通用组件                           │
│  ├── 布局组件                           │
│  ├── 导航组件                           │
│  ├── 数据录入                           │
│  ├── 数据展示                           │
│  └── 反馈组件                           │
└─────────────────────────────────────────┘

2015年 ─── Ant Design 诞生
    │
    │      蚂蚁金服内部使用
    │      服务于金融产品
    │
2016年 ─── 开源发布 1.0
    │
    │      GitHub 开源
    │      React 组件库
    │
2018年 ─── 发布 3.0
    │
    │      全新设计语言
    │      组件数量超过 60+
    │
2020年 ─── 发布 4.0
    │
    │      性能优化
    │      更好的 TypeScript 支持
    │
2022年 ─── 发布 5.0
    │
    │      CSS-in-JS 架构
    │      动态主题能力
    │      更好的开发体验
    │
至今   ─── 持续更新迭代

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

function App() {
  return (
    <div>
      <Button type="primary">按钮</Button>
      <Input placeholder="请输入" />
      <Table columns={columns} dataSource={data} />
    </div>
  );
}

Ant Design 生态系统
├── antd              核心组件库
├── antd-mobile       移动端组件库
├── ant-design-pro    企业级解决方案
├── ant-design-charts 图表组件
├── ant-design/icons  图标库
└── pro-components    高级业务组件

import { DatePicker } from 'antd';

function App() {
  return <DatePicker />;
}

import { ButtonProps } from 'antd/es/button';

const MyButton: React.FC<ButtonProps> = (props) => {
  return <Button {...props} />;
};

import { ConfigProvider } from 'antd';
import zhCN from 'antd/locale/zh_CN';

function App() {
  return (
    <ConfigProvider locale={zhCN}>
      <App />
    </ConfigProvider>
  );
}

import { ConfigProvider } from 'antd';

function App() {
  return (
    <ConfigProvider
      theme={{
        token: {
          colorPrimary: '#00b96b',
        },
      }}
    >
      <App />
    </ConfigProvider>
  );
}

Ant Design 5.x 架构
├── React 18+
│   └── 并发渲染支持
├── CSS-in-JS
│   └── @ant-design/cssinjs
├── 设计令牌
│   └── Design Token System
├── 组件库
│   └── 60+ 组件
└── 工具链
    ├── dayjs（日期）
    ├── rc-*（基础组件）
    └── @ant-design/icons（图标）