antd中 基本的ui组件的集中用法

1， 基础的button 

import React from "react";
import {Card,Button,Radio} from "antd";

import "./index.css"
export default class Ibutton extends React.Component{
    constructor(props,context){
        super(props,context);
        this.state={
            loading:true,
            size:"small"
        }
    }

    render(){
        return(<div>
            <Card title="基础机型">
                    <Button type="primary" >iphone X</Button>
                    <Button>iphone Xs</Button>
                    <Button type="dashed">iphone Xs Max</Button>
                    <Button type="danger">iphone Xr</Button>
                    <Button disabled >iphone Se</Button>
            </Card>
            <Card title="增删改查">
                <Button icon="plus" >增</Button>
                <Button icon="delete">删</Button>
                <Button icon="edit">改</Button>
                <Button icon="search" shape="circle"></Button>
                <Button icon="search" type="primary">搜索</Button>
                <Button icon="search" type="download">下载</Button>
            </Card>

          <Card title="Loading按钮">
              <Button type="primary" loading={this.state.loading}>确定</Button>
              <Button type="primary" loading={this.state.loading} shape="circle"></Button>
              <Button loading={this.state.loading}>点击加载</Button>
              <Button shape="circle" loading={this.state.loading}></Button>
              <Button type="primary" onClick={()=>{this.setState({loading:false})}}>关闭</Button>
          </Card>
            <Card title="按钮组">
                <Button.Group>
                     <Button icon="left" type="primary" style={{marginRight:"0px"}}>返回</Button>
                     <Button icon="right" type="primary" >前进</Button>
                </Button.Group>
            </Card>
            <Card title="按钮尺寸" >
                 <Radio.Group value={this.state.size} onChange={(e)=>{this.setState({size:e.target.value})}}>
                     <Radio value="small">小</Radio>
                     <Radio value="default">中</Radio>
                     <Radio value="large">大</Radio>
                 </Radio.Group>

                <Button type="primary" size={this.state.size}>beats solo3</Button>
            </Card>
        </div>)
    }
}

说说几种属性的使用：

title：显示标题

type：「  “primary” : 主要的， “dashed”：虚线  ， “danger”：警告 ，“”：默认」

disabled 禁用

icon 图标  各种图标 

shape 「 “circle”：圆形按钮」 这个时候最好就不要 在中间写字了 否则会放不下

loading ：true/false 来确定是否加载

size ：「“small”：小，“default”：中，“large”：大」

Button.Group 按钮组

Radio.Group 单选按钮组    具体的用法看上面

2 ，模态框的使用 

import React from "react";
import {Card,Button,Modal} from "antd";


import "./index.less"
export default class Modals extends React.Component{
   constructor(props,context){
       super(props,context);
       this.state={
           show1:false,
           show2:false,
           show3:false,
           show4:false
       }
   }

   handleConfirm(type) {
       Modal[type]({
           title:"确认？",
           content:"Do you want join Apple?",
           onOk(){
               console.log("ok");
           },
           onCancel(){
               console.log("Cancel");
           }
       })
   }



   render(){
       return(<div>
           <Card title="基础模态框" >
               <Button type="primary" onClick={()=>{this.setState({show1:true})}}>mac</Button>
               <Button type="primary" onClick={()=>{this.setState({show2:true})}}>iphone</Button>
               <Button type="primary" onClick={()=>{this.setState({show3:true})}}>ipod</Button>
               <Button type="primary" onClick={()=>{this.setState({show4:true})}}>iwatch</Button>
           </Card>
       <Modal
           title="mac"
           visible={this.state.show1}
           onCancel={()=>{this.setState({show1:false})}}
           onOk={()=>{this.setState({show1:false})}}
       >
            <p>Do you want a mac?</p>
       </Modal>
           <Modal
               title="iphone"
               visible={this.state.show2}
               onCancel={()=>{this.setState({show2:false})}}
               onOk={()=>{this.setState({show2:false})}}
               okText="好的，给你肾"
               cancelText="算了，买不起"
           >
               <p>Do you want an iphone?</p>
           </Modal>

           <Modal
               title="ipod"
               visible={this.state.show3}
               onCancel={()=>{this.setState({show3:false})}}
               onOk={()=>{this.setState({show3:false})}}
           >
               <p>Do you want an ipod?</p>
           </Modal>

           <Modal
               title="iwatch"
               visible={this.state.show4}
               onCancel={()=>{this.setState({show4:false})}}
               onOk={()=>{this.setState({show4:false})}}

           >
               <p>Do you want an iwatch?</p>
           </Modal>

           <Card title="信息确认框">
               <Button type="primary"  onClick={this.handleConfirm.bind(this,"confirm")}>确认框</Button>
               <Button type="primary"  onClick={this.handleConfirm.bind(this,"info")}>info</Button>
               <Button type="primary"  onClick={this.handleConfirm.bind(this,"success")}>success</Button>
               <Button type="primary"  onClick={this.handleConfirm.bind(this,"warning")}>warning</Button>
           </Card>
       </div>)
   }


}

（1）基础的模态框   // 可以加入表单部分

也就是控制一下 state里的 属性 ， visible：是否显示 true/false；

okText="好的，给你肾"   // 换 下面ok的字
cancelText="算了，买不起"  // 换 下面cancel的字

onCancel={()=>{this.setState({show1:false})}}  // 点击 cancel 的按钮 的动作
onOk={()=>{this.setState({show1:false})}}   // 点击 ok 按钮的动作 

（2），信息确认诓 

通过Modal[*] 去决定展示什么类型的框  ，

配置项里有

Modal[type]({
    title:"确认？",  // ok的显示
    content:"Do you want join Apple?",  // 内容展示
    onOk(){                    // 点击ok干啥
        console.log("ok");
    },
    onCancel(){              // 点击cancel干啥
        console.log("Cancel");
    }
})

四种类型的框 「”confirm“：确认框，“info”：传达信息框，“success”：成功消息框，“warning”：警告框」

3， loading组件

import React from "react";
import {Card,Spin,Icon,Alert} from "antd";
import "./index.less";

export default class Loading extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.state = {}
    }



    render() {

        const icon = <Icon type="plus" />
        return (<div>
            <Card>
                <Spin size="small"></Spin>
            </Card>
            <Card>
                <Spin size="default"></Spin>
            </Card>
            <Card>
                <Spin size="large"></Spin>
            </Card>
            <Card>
                <Spin size="default" indicator={icon} tip="加载中"></Spin>
            </Card>
            <Card title="内容">
                <Alert
                message="something"
                description="something is wrong"
                > </Alert>
            </Card>
            <Card title="内容变化">
                <Alert
                    message="something"
                    description="something is wrong"
                    type="error"
                > </Alert>
            </Card>
            <Card title="内容遮罩">
                <Spin tip="加载中">
                <Alert
                    message="something"
                    description="something is wrong"
                    type="success"
                > </Alert>
                </Spin>
            </Card>

        </div>)
    }
}

Spin 是加载的组件；自带一个loading 的默认框  ，tip 属性是加载的提示，size来控制图标的大小 依然有small，default，large三个值 ，indicator 属性能改变图标，可以配合Icon使用。

Icon 是自定义图标 type类型可以选择  类型 甚至于自己导入自己需要的图标；

Alert是 提醒文本框，经常使用三个属性， message是标题， description是内容，type是类型「“error”,"success","info","warning"」

Spin可以和Alert 嵌套 ，这样 Alert 就会自带一层蒙板效果；

4，通知消息类 

import React from "react";
import {Card,Button,notification} from "antd";


import "./index.less"

export default class Notice extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.state = {}
    }

    handleClick(type,placement){
        notification[type]({
            message:"max破发了",
            description:"shit，第一天买就破发了",
            placement:placement?placement:"topLeft"
        })
    }

    render() {
        return (<div>
            <Card title="通知栏">
                <Button  type="primary" onClick={() => {this.handleClick("success","topRight")}}>右上边过来，成功弹窗</Button>
                <Button  type="primary" onClick={() => {this.handleClick("info","topLeft")}}>左上边过来，信息弹窗</Button>
                <Button  type="primary" onClick={() => {this.handleClick("warning","bottomRight")}}>右下边过来，警告弹窗</Button>
                <Button  type="primary" onClick={() => {this.handleClick("error","bottomLeft")}}>左下边过来，错误弹窗</Button>
                <Button  type="primary" onClick={() => {this.handleClick("error")}}>修改默认方向</Button>
            </Card>



        </div>)
    }

}

通知类的  主要是notification  这个组件；

使用方法 来触发这个组件的各种类型「“error”，“success”，“info”，“warning”」， 主要属性有：

message ：标题

description：内容

placement：方向  「“topLeft”，“topRight‘，”bottomLeft“，”bottomRight“」

5， message 全局通知

import "./index.less"
export default class Message extends React.Component{
    constructor(props,context){
        super(props,context);
    }

    handleClick(type){
        message[type]("iphonexs 破发了");
    }

    render(){
        return(<div>
           <Card>
               <Button type="primary"  onClick={this.handleClick.bind(this,"success")} >成功</Button>
               <Button type="primary"  onClick={this.handleClick.bind(this,"error")} >失败</Button>
               <Button type="primary"  onClick={this.handleClick.bind(this,"warning")} >警告</Button>
               <Button type="primary"  onClick={this.handleClick.bind(this,"info")} >信息</Button>
           </Card>
        </div>)
    }

}

message 组件------全局信息框 拥有几种类型「“error”，“info”，“success”，“warning”」;

6 tabs 选项卡  

import React from "react";
import  {Card,Tabs,Icon} from "antd";

import "./index.less"
export default class ITabs extends React.Component{
    constructor(props,context){
        super(props,context);
    }

    render(){
        return(<div>
            <Card title="选项卡标签页" >
                 <Tabs defaultActiveKey="333"  onChange={(e)=>{console.log(e)}}>
                     <Tabs.TabPane tab="11" key="1">1111</Tabs.TabPane>
                     <Tabs.TabPane tab="222" key="222">2222</Tabs.TabPane>
                     <Tabs.TabPane tab="333" key="333">3333</Tabs.TabPane>
                 </Tabs>
            </Card>
            <Card title="换图标" >
                <Tabs defaultActiveKey="333"  onChange={(e)=>{console.log(e)}}>
                    <Tabs.TabPane tab={<span><Icon type="plus"/>111</span>} key="1">1111</Tabs.TabPane>
                    <Tabs.TabPane tab="222" key="222">2222</Tabs.TabPane>
                    <Tabs.TabPane tab="333" key="333">3333</Tabs.TabPane>
                </Tabs>
            </Card>

        </div>)
    }

}

Tabs 和Tabs.TabPane 配合使用； 

在Tabs上 defaultActiveKey属性来控制第一次载入显示的标签，使用key值来控制；onChange事件来输出点击事件 以及key值（e）；

Tab.TabPane  中 tab 属性为标题 ，如果想改变标题可以使用 Icon标签注意这个标签是单标签，如果需要配合文字使用 ，请加标签包裹，Icon 不能满足图标要求 定制img ； key值为索引 ； disabled ：禁用

7，  Carousel 轮播组件

import React from "react";
import {Card,Carousel} from "antd";

import "./index.less";
import img1 from "./img/1.jpg";
import img2 from "./img/2.jpg";
import img3 from "./img/3.jpg";

export default class MyCarousel extends React.Component{
    constructor(props,context){
        super(props,context);
    }
    render(){
        return(<div>
               <Card>
                   <Carousel autoplay={true} effect="fade" easing="linear">
                       <div><h3>1</h3></div>
                       <div><h3>2</h3></div>
                       <div><h3>3</h3></div>
                   </Carousel>
               </Card>
            <Card>
                <Carousel autoplay={true} effect="fade" easing="linear">
                    <div><img src={img1} /></div>
                    <div><img src={img2} /></div>
                    <div><img src={img3} /></div>
                </Carousel>
            </Card>
        </div>)
    }
}

 这边需要配一些样式 看着改就行了 .less 

.ant-carousel .slick-slide {
  text-align: center;
  height: 500px;
  line-height: 160px;
  background: #364d79;
  overflow: hidden;
  img{
    width: 100%;
    height: auto;
  }
}

.ant-carousel .slick-slide h3 {
  color: #fff;
}

carousel 中 的每个画面需要用 div包裹； 然后就随意整吧 ；

属性 也有很多 可以去官网看着配 ；

主要用的 有

autoplay ：自动轮播；

effect ： 动画效果函数  这边我觉得fade挺不错的；

easing： 动画效果 linear  线性的 

如果需要背景图片 看着整就行了 css花时间多整整就完事了