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 (
                <div>
                    <Card title={<div style={{textAlign:"left"}}>基礎按鈕</div>} className="card-wrap">
                        <Button type="primary">Imooc</Button>
                        <Button>Imooc</Button>
                        <Button type="dashed">Imooc</Button>
                        <Button type="danger">Imooc</Button>
                        <Button disabled>Imooc</Button>
                    </Card>
                    <Card title={<div style={{textAlign:"left"}}>圖形按鈕</div>} className="card-wrap">
                        <Button icon="plus">創建</Button>
                        <Button icon="edit">編輯</Button>
                        <Button icon="delete">刪除</Button>
                        <Button shape="circle" icon="search"></Button>
                        <Button type="primary" icon="search">搜索</Button>
                        <Button type="primary" icon="download">下載</Button>
                    </Card>
                    <Card title={<div style={{textAlign:"left"}}>loading按鈕</div>} className="card-wrap">
                        <Button type="primary" loading={this.state.loading}>確定</Button>
                        <Button type="primary" shape="circle" loading={this.state.loading}></Button>
                        <Button loading={this.state.loading}>點擊加載</Button>
                        <Button shape="circle" loading={this.state.loading}></Button>
                        <Button type="primary" onClick={this.handleCloseLoading}>關閉</Button>
                    </Card>
                    <Card title={<div style={{textAlign:"left"}}>按鈕組</div>} style={{marginBottom:10}}>
                        <Button.Group>
                            <Button type="primary" icon="left">返回</Button>
                            <Button type="primary" icon="right">前進</Button>
                        </Button.Group>
                    </Card>
                    <Card title={<div style={{textAlign:"left"}}>按鈕尺寸</div>} className="card-wrap">
                        <Radio.Group value={this.state.size} onChange={this.handleChange}>
                            <Radio value="small">小</Radio>
                            <Radio value="default">中</Radio>
                            <Radio value="large">大</Radio>
                        </Radio.Group>
                        <Button type="primary" size={this.state.size}>Imooc</Button>
                        <Button size={this.state.size}>Imooc</Button>
                        <Button type="dashed" size={this.state.size}>Imooc</Button>
                        <Button type="danger" size={this.state.size}>Imooc</Button>
                    </Card>

                </div>
        );
    }
}

二、彈框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 (
            <div>
                <Card title="Tab頁籤" className='card-wrap'>
                    <Tabs defaultActiveKey="1" onChange={this.handleCallback}>
                        <TabPane tab="Tab 1" key="1">Content of Tab Pane 1</TabPane>
                        <TabPane tab="Tab 2" key="2" disabled>Content of Tab Pane 2</TabPane>
                        <TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane>
                    </Tabs>
                </Card>
                <Card title="Tab帶圖標的頁籤" className='card-wrap'>
                    <Tabs defaultActiveKey="1" onChange={this.handleCallback}>
                        <TabPane tab={<span><Icon type="plus"/>Tab 1</span>} key="1">Content of Tab Pane 1</TabPane>
                        <TabPane tab={<span><Icon type="edit"/>Tab 2</span>} key="2">Content of Tab Pane 2</TabPane>
                        <TabPane tab={<span><Icon type="delete"/>Tab 3</span>} key="3">Content of Tab Pane 3</TabPane>
                    </Tabs>
                </Card>
                <Card title="Tab動態的頁籤" className='card-wrap'>
                <Tabs defaultActiveKey="1" onChange={this.handleCallback}>
                    {
                        this.state.panes.map((panel)=>{
                            return <TabPane 
                                tab={panel.title}
                                key={panel.key}
                            />
                        })
                    }
                </Tabs>
                </Card>
            </div>
        )
    }
}

 

三、加載中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 = <Icon type="loading" style={{fontSize:24}}></Icon>
        return (
            <div>
                 <Card title={<div style={{textAlign:"left"}}>Spin用法</div>} className="card-wrap">
                    <Spin size="small"></Spin>
                    <Spin style={{margin:'0 10px'}}></Spin>
                    <Spin size="large"></Spin>
                    <Spin indicator={icon} style={{marginLeft:10}}></Spin>
                </Card>  
                <Card title={<div style={{textAlign:"left"}}>內容遮罩</div>} className="card-wrap">
                    <Alert
                        message = "React"
                        description="歡迎來到React高級教程"
                        type="info"
                    ></Alert>
                     <Alert
                        message = "React"
                        description="歡迎來到React高級教程"
                        type="warning"
                    ></Alert>
                    <Spin>
                        <Alert
                            message = "React"
                            description="歡迎來到React高級教程"
                            type="warning"
                        ></Alert>
                    </Spin>
                    <Spin indicator={icon} tip="加載中...">
                        <Alert
                            message = "React"
                            description="歡迎來到React高級教程"
                            type="warning"
                        ></Alert>
                    </Spin>
                </Card>  
            </div>
        )
    }
}

 

四、通知提醒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 (
            <div>
                <Card title="通知提醒框" className="card-wrap">
                    <Button type="primary" onClick={()=>this.openNotification('success')}>Success</Button>
                    <Button type="primary" onClick={()=>this.openNotification('info')}>Info</Button>
                    <Button type="primary" onClick={()=>this.openNotification('warning')}>Warning</Button>
                    <Button type="primary" onClick={()=>this.openNotification('error')}>Error</Button>
                </Card>
                <Card title="不同位置的通知提醒框" className="card-wrap">
                    <Button type="primary" onClick={()=>this.openNotification('success','topLeft')}>Success</Button>
                    <Button type="primary" onClick={()=>this.openNotification('info','topRight')}>Info</Button>
                    <Button type="primary" onClick={()=>this.openNotification('warning','bottomLeft')}>Warning</Button>
                    <Button type="primary" onClick={()=>this.openNotification('error','bottomRight')}>Error</Button>
                </Card>
            </div>
        );
    }
}

五、全局提示框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(
            <div>
                <Card title="全局提示框" className="card-wrap">
                    <Button type="primary" onClick={()=>this.showMessage('success')}>Success</Button>
                    <Button type="primary" onClick={()=>this.showMessage('info')}>Info</Button>
                    <Button type="primary" onClick={()=>this.showMessage('warning')}>Warning</Button>
                    <Button type="primary" onClick={()=>this.showMessage('error')}>Error</Button>
                    <Button type="primary" onClick={()=>this.showMessage('loading')}>Loading</Button>
                </Card>
            </div>
        )
    }
}

 

六、頁籤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 (
            <div>
                <Card title="Tab頁籤" className='card-wrap'>
                    <Tabs defaultActiveKey="1" onChange={this.handleCallback}>
                        <TabPane tab="Tab 1" key="1">Content of Tab Pane 1</TabPane>
                        <TabPane tab="Tab 2" key="2" disabled>Content of Tab Pane 2</TabPane>
                        <TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane>
                    </Tabs>
                </Card>
                <Card title="Tab帶圖標的頁籤" className='card-wrap'>
                    <Tabs defaultActiveKey="1" onChange={this.handleCallback}>
                        <TabPane tab={<span><Icon type="plus"/>Tab 1</span>} key="1">Content of Tab Pane 1</TabPane>
                        <TabPane tab={<span><Icon type="edit"/>Tab 2</span>} key="2">Content of Tab Pane 2</TabPane>
                        <TabPane tab={<span><Icon type="delete"/>Tab 3</span>} key="3">Content of Tab Pane 3</TabPane>
                    </Tabs>
                </Card>
                <Card title="Tab動態的頁籤" className='card-wrap'>
                <Tabs 
                    onChange={this.onChange}
                    activeKey={this.state.activeKesy}
                    // defaultActiveKey="1" 
                    // onChange={this.handleCallback}
                    type="editable-card"
                    onEdit={this.onEdit}
                >
                    {
                        this.state.panes.map((panel)=>{
                            return <TabPane 
                                tab={panel.title}
                                key={panel.key}
                            />
                        })
                    }
                </Tabs>
                </Card>
            </div>
        )
    }
}