Ant Design of React介绍
1、 antd 是基于 Ant Design 设计体系的 React UI 组件库
2、开箱即用的高质量 React 组件
3、使用 TypeScript 构建，提供完整的类型定义文件

一、装包

• npm install antd --save

二、进入 Ant Design官网查看所需组件

以按钮Button作介绍

• 进入官网点击 组件
  

  官网

• 选择Button进行查看，其中有不同类型的Button按钮的代码演示以及API

  
  代码演示
  API

三、引用

在需要使用antd组件的页面导入所需组件，并且导入antd的样式文件

import { Input } from 'antd'
import 'antd/dist/antd.css'

四、Input组件的使用

1、 进入Ant Design官网，进入组件部分找到Input，在代码演示中选择需要的Input框类型，点击展开代码按钮

image.png

2、 将代码复制到项目中

<Input placeholder="Basic usage" />

       <div style={{
          width: '500px',
          height: '200px',
          background: '#fff',
          padding: '30px',
          borderRadius:'10px'
        }}>
          {/* Input框 */}
          <div style={{
            width: '100%',
            display: 'flex',
            justifyContent: 'space-around',
            alignItems: 'center',
          }}>
            <div style={{width:'100px',fontSize:'15px'}}>输入框：</div>
            <Input placeholder="Basic usage" />
          </div>
          {/* Input框 */}
        </div>

3、项目运行中的效果

image.png

4、查看api，搞出更花里胡哨的input框

• 以value属性为例，api介绍为输入框内容
  在代码中为Input框设置value属性

 <Input value={'我是因value属性而生的内容'} />

Input-value

• 项目运行中的效果

  
  请看输入框2

五、Button组件的使用

各个组件使用流程基本一致：进入官网找到组件中的Button,进入代码演示，选择需要的类型展开代码，复制到所需位置。在此不做冗余介绍，直接上图和代码

不要忘了import

import { Input, Button } from 'antd'

 <Button type="primary">按钮</Button>

Buttom

六、最终效果及文件代码

最终效果

import React, { Component } from 'react'
import { Input, Button } from 'antd'
import 'antd/dist/antd.css'

export class AntdPages extends Component {
  constructor(props) {
    super(props)
    this.state = {
    };
  };
  render() {
    return (
      <div style={{
        width: '100%',
        height: window.innerHeight,
        background: '#001D37',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
      }}>
        <div style={{
          width: '500px',
          height: '200px',
          background: '#fff',
          padding: '30px',
          borderRadius: '10px'
        }}>
          {/* Input框 */}
          <div style={{
            width: '100%',
            display: 'flex',
            justifyContent: 'space-around',
            alignItems: 'center',
          }}>
            <div style={{ width: '100px', fontSize: '15px' }}>输入框1：</div>
            <Input placeholder="Basic usage" />
          </div>
          {/* Input框 */}

          {/* Input框 */}
          <div style={{
            width: '100%',
            marginTop: '20px',
            display: 'flex',
            justifyContent: 'space-around',
            alignItems: 'center',
          }}>
            <div style={{ width: '100px', fontSize: '15px' }}>输入框2：</div>
            <Input value={'我是因value属性而生的内容'} />
          </div>
          {/* Input框 */}

          {/* Button */}
          <div style={{
            width: '100%',
            marginTop: '30px',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
          }}>
            <Button type="primary">按钮</Button>
          </div>
          {/* Buttom */}

        </div>
      </div>
    )
  }
}

export default AntdPages

欲知完整代码如何请见GitHub

https://github.com/jade-kylin/antd-study.git

git clone https://github.com/jade-kylin/antd-study.git

执行即可获取到完整项目文件