AntDesign组件库的使用

Posted 2022-01-05 小小白学计算机

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AntDesign组件库的使用相关的知识，希望对你有一定的参考价值。

一、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的安装

使用 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>
    );
  
*/