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