首页 > 网络编程 > JavaScript > javascript类库 > React > Ant Design组件库的使用

Ant Design组件库的使用教程

2023-12-15 11:10:48 作者：小小白学计算机

AntDesign ,简称antd是基于 Ant Design 设计体系的 React UI 组件库,主要用于研发企业级中后台产品,这篇文章主要介绍了Ant Design组件库的使用教程,需要的朋友可以参考下

一、AntDesign的介绍

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

中后台的产品属于工具性产品，很多优秀的设计团队通过自身的探索和积累，形成了自己的设计体系。

AntDesign的特点：

提炼自企业级中后台产品的交互语言和视觉风格。
开箱即用的高质量 React 组件。
使用 TypeScript 开发，提供完整的类型定义文件。
全链路开发和设计工具体系。
数十个国际化语言支持。
深入每个细节的主题定制能力。

全链路开发和设计指的是什么？

全链路这个词我记得是16年左右阿里提出的；
从业务战略—用户场景—设计目标—交互体验—用户流程—预期效率全方面进行分析和考虑；
这个主要是产品经理会考虑的一个点；

二、AntDesign兼容性

AntDesign的兼容性：

现代浏览器和 IE11（需要 polyfills）。
支持服务端渲染。
Electron

antd@2.0 之后不再支持 IE8，antd@4.0 之后不再支持 IE9/10。
目前稳定的版本：v4.4.0

三、AntDesign的安装

AntDesign:https://ant.design/index-cn/

使用 npm 或 yarn 安装

npm install antd –save
或
yarn add antd

我们需要在index.js中引入全局的Antd样式：

import "antd/dist/antd.css";

在App.js中就可以使用一些组件了：

import React, {PureComponent} from 'react';
import moment from 'moment'
import {Button, Space, DatePicker} from 'antd'
import { PoweroffOutlined } from '@ant-design/icons';
function onChange(date, dateString) {
    console.log(date, dateString);
}
class App extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            loadings: [],
        };
    }
    enterLoading = index => {
        this.setState(({ loadings }) => {
            const newLoadings = [...loadings];
            newLoadings[index] = true;
            return {
                loadings: newLoadings,
            };
        });
        setTimeout(() => {
            this.setState(({ loadings }) => {
                const newLoadings = [...loadings];
                newLoadings[index] = false;
                return {
                    loadings: newLoadings,
                };
            });
        }, 6000);
    };
    render() {
        const { loadings } = this.state;
        return (
            <div>
                <>
                    {/*<Space style={{ width: '100%' }}>
                        <Button type="primary" loading>
                            Loading
                        </Button>
                        <Button type="primary" size="small" loading>
                            Loading
                        </Button>
                        <Button type="primary" icon={<PoweroffOutlined />} loading />
                    </Space>*/}
                   {/* <Space style={{ width: '100%' }}>
                        <Button type="primary" loading={loadings[0]} onClick={() => this.enterLoading(0)}>
                            Click me!
                        </Button>
                        <Button
                            type="primary"
                            icon={<PoweroffOutlined />}
                            loading={loadings[1]}
                            onClick={() => this.enterLoading(1)}
                        >
                            Click me!
                        </Button>
                        <Button
                            type="primary"
                            icon={<PoweroffOutlined />}
                            loading={loadings[2]}
                            onClick={() => this.enterLoading(2)}
                        />
                    </Space>*/}
                    <Button type="primary" loading={loadings[0]} onClick={() => this.enterLoading(0)}>
                        Click me!
                    </Button>
                    <DatePicker defaultValue={moment('2018-06-12', 'YY-MM-DD')}
                                onChange={onChange} picker="day"
                                allowClear={false}
                    />
                </>
            </div>
        );
    }
}
export default App;
/*class App extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            isActive: true
        }
    }
  render() {
        const {isActive} = this.state
        let isBar = true
        const errClass = 'error'
        const warnClass = null
    return (
        <div>
          {/!*  原生React中添加class的方法  *!/}
          <h2 className={'foo bar active title'}>我是标题1</h2>
          <h2 className={'title ' + (isActive ? 'active' : '')}>我是标题2</h2>
          <h2 className={['title', (isActive ? 'active' : '')].join(" ")}>我是标题3</h2>
          {/!*  使用classnames库动态添加class  *!/}
            <h2 className={'foo bar active title'}>我是标题4</h2>
          <h2 className={classNames('foo', 'bar', 'active', 'title')}>我是标题5</h2>
          <h2 className={classNames({'active': isActive, 'bar': isBar}, 'title')}>我是标题6</h2>
          <h2 className={classNames('foo', errClass, warnClass, {'active': isActive})}>我是标题7</h2>
          <h2 className={classNames(['active', 'title'])}>我是标题8</h2>
          <h2 className={classNames(['active', 'title'], {'bar': isBar})}>我是标题9</h2>
        </div>
    );
  }
}*/

考虑一个问题：Antd是否会将一些没有用的代码（组件或者逻辑代码）引入，造成包很大呢？

antd 官网有提到：antd 的 JS 代码默认支持基于 ES modules 的 tree shaking，对于 js 部分，直接引入 import { Button } from ‘antd’ 就会有按需加载的效果。