Ant Design有关综述

2021SC@SDUSC

是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

其被如蚂蚁金服、阿里巴巴、百度等公司投入使用

我主要介绍关与其UI组件中的反馈部分与其他部分，内容包括有

Alert警告

Drawer抽屉

Message全局提示

Modal对话框

Notification通知提示

Popconfirm气泡提示

Progress进度条

Result结果

Skeleton骨架屏

Spin加载中

Anchor锚点

BackTop回到顶部

ConfigProvider全局化配置

有关AntDesign的前端实现

官方采用了React封装了一套Ant Design库

还包括了一些社区的其他封装版本

• NG-ZORRO - Ant Design of Angular
• NG-ZORRO-MOBILE - Ant Design Mobile of Angular
• Ant Design of Vue
• Ant Design Blazor
• San UI Toolkit for Ant Design
• antizer (ClojureScript)

前置学习知识

在开始之前，推荐先学习 React 和 ES2015，并正确安装和配置了 Node.js v8 或以上。官方指南假设你已了解关于 HTML、CSS 和 JavaScript 的中级知识，并且已经完全掌握了 React 全家桶的正确开发方式。如果你刚开始学习前端或者 React，将 UI 框架作为你的第一步可能不是最好的主意。

Ant Design的一个小例子

import React from "react";
import ReactDOM from "react-dom";
import { Button, DatePicker, version } from "antd";
import "antd/dist/antd.css";
import "./index.css";

ReactDOM.render(
  <div className="App">
    <h1>antd version: {version}</h1>
    <DatePicker />
    <Button type="primary" style={{ marginLeft: 8 }}>
      Primary Button
    </Button>
  </div>,
  document.getElementById("root")
);

可见，其通过js和html实现组建的导入与使用

其展现的页面如下图所示

 可以通过import其他组件来丰富页面内容，然后再render中添加对用的jsx代码

实际项目开发中，你会需要构建、调试、代理、打包部署等一系列工程化的需求。您可以阅读后面的文档或者使用以下脚手架和范例：

• Ant Design Pro

• antd-admin

• d2-admin

• 更多脚手架可以查看 脚手架市场

按需加载

antd 默认支持基于 ES modules 的 tree shaking，对于 js 部分，直接引入 import { Button } from 'antd' 就会有按需加载的效果。

如果你在开发环境的控制台看到下面的提示，那么你可能还在使用 webpack@1.x 或者 tree shaking 失效，请升级或检查相关配置。

来看其里面tests文件夹中index.test.js

describe('antd dist files', () => {
  // https://github.com/ant-design/ant-design/issues/1638
  // https://github.com/ant-design/ant-design/issues/1968
  it('exports modules correctly', () => {
    // eslint-disable-next-line global-require,import/no-unresolved
    const antd = testDist ? require('../dist/antd') : require('../components');
    expect(Object.keys(antd)).toMatchSnapshot();
  });

 

expect(Object.keys(antd)).toMatchSnapshot();匹配其中UI组件库中的内容

对应的snap内容

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`antd dist files exports modules correctly 1`] = `
Array [
  "Affix",
  "Anchor",
  "AutoComplete",
  "Alert",
  "Avatar",
  "BackTop",
  "Badge",
  "Breadcrumb",
  "Button",
  "Calendar",
  "Card",
  "Collapse",
  "Carousel",
  "Cascader",
  "Checkbox",
  "Col",
  "Comment",
  "ConfigProvider",
  "DatePicker",
  "Descriptions",
  "Divider",
  "Dropdown",
  "Drawer",
  "Empty",
  "Form",
  "Grid",
  "Input",
  "Image",
  "InputNumber",
  "Layout",
  "List",
  "message",
  "Menu",
  "Mentions",
  "Modal",
  "Statistic",
  "notification",
  "PageHeader",
  "Pagination",
  "Popconfirm",
  "Popover",
  "Progress",
  "Radio",
  "Rate",
  "Result",
  "Row",
  "Select",
  "Skeleton",
  "Slider",
  "Space",
  "Spin",
  "Steps",
  "Switch",
  "Table",
  "Transfer",
  "Tree",
  "TreeSelect",
  "Tabs",
  "Tag",
  "TimePicker",
  "Timeline",
  "Tooltip",
  "Typography",
  "Upload",
  "version",
]
`;

这些便是 components文件夹的内容即组件

if (testDist) {
    it('antd.js should export version', () => {
      // eslint-disable-next-line global-require,import/no-unresolved
      const antd = require('../dist/antd');
      expect(antd).toBeTruthy();
      expect(antd.version).toBe(pkg.version);
    });

    it('antd.min.js should export version', () => {
      // eslint-disable-next-line global-require,import/no-unresolved
      const antd = require('../dist/antd.min');
      expect(antd).toBeTruthy();
      expect(antd.version).toBe(pkg.version);
    });

查看是否符合当前最新版本

onst defaultTheme = require('../dist/default-theme');
    const darkTheme = require('../dist/dark-theme');
    const compactTheme = require('../dist/compact-theme');
    const { getThemeVariables } = require('../dist/theme');

 设置主题

const expectThemeWithoutDark = theme => {
      expect(theme['blue-3']).toBe("color(~`colorPalette('@{blue-6}', 3) `)");
      expect(theme['body-background']).toBe('#fff');
    };

    const expectDarkTheme = theme => {
      expect(theme['blue-3']).toBe('mix(@blue-base, @component-background, 30%)');
      expect(theme['body-background']).toBe('@black');
    };

    const expectThemeWithoutCompact = theme => {
      expect(theme['padding-lg']).toBe('24px');
      expect(theme['padding-md']).toBe('16px');
    };

    const expectCompactTheme = theme => {
      expect(theme['padding-lg']).toBe('16px');
      expect(theme['padding-md']).toBe('8px');
    };

规定了主题的相关格式信息 

describe('theme variables', () => {
      it('should be get default theme', () => {
        expectThemeWithoutDark(defaultTheme);
        expectThemeWithoutCompact(defaultTheme);
      });

      it('should be get dark theme', () => {
        expectDarkTheme(darkTheme);
        expectThemeWithoutCompact(darkTheme);
      });

      it('should be get compact theme', () => {
        expectCompactTheme(compactTheme);
        expectThemeWithoutDark(compactTheme);
      });

      it('shoule get default variables by getThemeVariables()', () => {
        const theme = getThemeVariables();
        expectThemeWithoutCompact(theme);
        expectThemeWithoutDark(theme);
      });

      it('shoule get dark variables by getThemeVariables({ dark: true })', () => {
        const theme = getThemeVariables({ dark: true });
        expectDarkTheme(theme);
        expectThemeWithoutCompact(theme);
      });

      it('shoule get compact variables by getThemeVariables({ compact: true })', () => {
        const theme = getThemeVariables({ compact: true });
        expectThemeWithoutDark(theme);
        expectCompactTheme(theme);
      });

      it('shoule get compact&dark variables by getThemeVariables({ compact: true, dark: true })', () => {
        const theme = getThemeVariables({ compact: true, dark: true });
        expectDarkTheme(theme);
        expectCompactTheme(theme);
      });
    });

 当制定了theme variables时如何确定对应的theme，共分为七种情况。基本围绕dark，compact，和default以及对应的取not（not dark等）组合形式