React全家桶+共享单车实战开发-—— 5 Andt UI组件
请参考： https://blog.csdn.net/qq_34235864/article/details/86583395
https://blog.csdn.net/qq_34829447/article/details/81977779
实战内容：
一、按钮Button
- pages->ui->button.js：对应路由/admin/ui/buttons
import React from 'react'
import {Card, Button,Radio} from 'antd'
import './ui.less'
export default class Buttons extends React.Component{
state={
loading: true,
size:'default'
}
handleCloseLoading=()=>{
this.setState({
loading: false
});
}
handleChange=(e)=>{
this.setState({
size: e.target.value
})
}
render(){
return (
基础按钮 } className="card-wrap">
图形按钮 二、弹框Modal
- pages->ui->modals：对应路由/admin/ui/modals
import React from 'react'
import {Card , Button, message, Icon, Tabs} from 'antd'
import './ui.less'
import { spawn } from 'child_process';
const TabPane = Tabs.TabPane;
export default class Messages extends React.Component{
componentWillMount(){
const panes = [
{
title: 'Tab 1',
content: '欢迎使用Tab 1页签',
key: '1'
},
{
title: 'Tab 2',
content: '欢迎使用Tab 2页签',
key: '2'
},
{
title: 'Tab 3',
content: '欢迎使用Tab 3页签',
key: '3'
}
]
this.setState({
panes
})
}
handleCallback = (key)=>{
message.info("Hi,您选择了页签："+key)
}
render(){
return (
Content of Tab Pane 1
Content of Tab Pane 2
Content of Tab Pane 3
{
this.state.panes.map((panel)=>{
return
)
}
}
三、加载中Spin
- pages->ui->loadings：对应路由/admin/ui/loadings
import React from 'react'
import {Card , Button, Spin, Icon, Alert} from 'antd'
import './ui.less'
export default class Loadings extends React.Component{
render(){
const icon = Spin用法 } className="card-wrap">
内容遮罩
四、通知提醒Notification
- pages->ui->notice.js：对应路由/admin/ui/notification
import React from 'react'
import {Card , Button,Radio, Spin, Icon, Alert, notification} from 'antd'
import './ui.less'
export default class Notice extends React.Component{
openNotification = (type,direction)=>{
if(direction){
notification.config({
placement: direction
})
}
notification[type]({
message:'发工资了',
description:'上个月考勤22天, 迟到12天，实发工资250，请笑纳'
})
}
render(){
return (
);
}
}
五、全局提示框Message
- pages->ui->messages：对应路由/admin/ui/messages
import React from 'react'
import {Card , Button, message} from 'antd'
import './ui.less'
export default class Messages extends React.Component{
showMessage=(type)=>{
message[type]('恭喜你，React 课程晋级成功');
}
render(){
return(
)
}
}
六、页签Tab
- pages->ui->tabs.js：对应路由/admin/ui/tabs
import React from 'react'
import {Card , Button, message, Icon, Tabs} from 'antd'
import './ui.less'
import { spawn } from 'child_process';
const TabPane = Tabs.TabPane;
export default class Messages extends React.Component{
componentWillMount(){
const panes = [
{
title: 'Tab 1',
content: '欢迎使用Tab 1页签',
key: '1'
},
{
title: 'Tab 2',
content: '欢迎使用Tab 2页签',
key: '2'
},
{
title: 'Tab 3',
content: '欢迎使用Tab 3页签',
key: '3'
}
]
this.setState({
activeKey: panes[0].Key,
panes
})
}
handleCallback = (key)=>{
message.info("Hi,您选择了页签："+key)
}
onChange=(activeKey)=>{
this.setState({
activeKey
})
}
onEdit=(targetKey,action)=>{
this[action](targetKey);
}
add = () => {
const panes = this.state.panes;
const activeKey = `newTab${this.newTabIndex++}`;
panes.push({ title: activeKey, content: 'Content of new Tab', key: activeKey });
this.setState({ panes, activeKey });
}
//activeKey:当前激活的key, targetKey:当前删除的Key
remove = (targetKey) => {
let activeKey = this.state.activeKey;
let lastIndex;
this.state.panes.forEach((pane, i) => {
if (pane.key === targetKey) {
lastIndex = i - 1;
}
});
const panes = this.state.panes.filter(pane => pane.key !== targetKey);
if (lastIndex >= 0 && activeKey === targetKey) {
activeKey = panes[lastIndex].key;
}
this.setState({ panes, activeKey });
}
render(){
return (
Content of Tab Pane 1
Content of Tab Pane 2
Content of Tab Pane 3
{
this.state.panes.map((panel)=>{
return
)
}
}