react-anted的运用

anted运用加载：参考资料https://ant.design/docs/react/introduce-cn

cnpm install --save antd

import {DatePicker} from 'antd'

样式加载两种方式：第一种

直接手动引入：import 'antd/dist/antd.css'

第二种在.babelrc文件中引入：

在引入下面的必须要加载：

cnpm install --save-dev babel-plugin-import

 "plugins": [
    ["import", { libraryName: "antd", style: "css" }] 
   ]

方能成功；

import {DatePicker,message } from 'antd'
handleChange(date) {
    console.log(date)
    message.info('您选择的日期是: ' + date.toLocaleString());
    this.setState({ date:date });
  }
render(){
    
    return(
            
        <div className='mine'>
         我来啦
         <DatePicker onChange={value=>this.handleChange(value)} className='datePicker' />
         <div>当前日期：{this.state.date.toString()}</div>
         <Hello/>
        </div>
    )
  }
}

button按钮的用法：

 <div className="hello">
        <Button type="primary" id='btn' loading={this.state.loading} onClick={this.enterLoading.bind(this)}>Primary</Button>
        <Button>Default</Button>
        <Button type="dashed" icon='search'></Button>
        <Button type="danger">Danger</Button>
 </div>

详情参考antd官网API文档；https://ant.design/components/button-cn/

Icon图标的用法：

<Icon type="step-backward" spin='true' />
<Icon type="step-forward" style={{ fontSize: 20, color: '#08c' }}/>

详情API参考API文档：
https://ant.design/components/icon-cn/

栅格系统：24 栅格系统

<Row>
                <Col span={12}>24列栅格</Col>
                <Col span={12}>24列栅格</Col>
            </Row>
            <Row>
              <Col span={8}>col-8</Col>
              <Col span={8} offset={8}>col-8</Col>
            </Row>
            <Row>
              <Col span={6} offset={6}>col-6</Col>
              <Col span={6} offset={6}>col-6</Col>
            </Row>
            <Row>
              <Col span={18} push={6}>col-18 col-push-6</Col>
              <Col span={6} pull={18}>col-6 col-pull-18</Col>
            </Row>
            <Row type="flex" justify="start">
              <Col span={4}>col-4</Col>
              <Col span={4}>col-4</Col>
              <Col span={4}>col-4</Col>
              <Col span={4}>col-4</Col>
            </Row>

下拉菜单：

render(){

  const menu = (
      <Menu>
        <Menu.Item>
          <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">1st menu item</a>
        </Menu.Item>
        <Menu.Item>
          <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">2nd menu item</a>
        </Menu.Item>
        <Menu.Item>
          <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">3rd menu item</a>
        </Menu.Item>
      </Menu>
  )
    return(
      <div className="hello">
     
         <div>
            <Dropdown overlay={menu}>
                <a className="ant-dropdown-link" href="#">
                  Hover me <Icon type="down" />
                </a>
             </Dropdown>
         </div>
      </div>

    )
  }
}

上传图片文件：

import { Upload, message, Button, Icon } from 'antd';
class News extends Component{
  render(){
  	const props = {
		  name: 'file',
		  action: '//jsonplaceholder.typicode.com/posts/',
		  headers: {
		    authorization: 'authorization-text',
		  },
		  onChange(info) {
		    if (info.file.status !== 'uploading') {
		      console.log(info.file, info.fileList);
		    }
		    if (info.file.status === 'done') {
		      message.success(`${info.file.name} file uploaded successfully`);
		    } else if (info.file.status === 'error') {
		      message.error(`${info.file.name} file upload failed.`);
		    }
		  },
   		};	
	
    return(
      <div className="hello">
	      	<Upload {...props}>
			    <Button>
			      <Icon type="upload" /> Click to Upload
			    </Button>
  			</Upload>  
      </div>

    )
  }
}

猜你喜欢