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“」

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

猜你喜欢

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