react使用antd-简单的文本框.密码框的使用

react项目中使用antd

简单的文本框.密码框的使用

开发工具：vscode
1.antd官网：https://ant.design/docs/react/introduce-cn
安装antd npm install antd --save 或者 cnpm install antd –save
2.使用antd：按照页面使用模块的不同进行antd组件的使用

3.引入后就可以使用

4.页面在【谷歌浏览器】展示

import React,{Component} from "react";
import { Input, Button } from 'antd';
import { EyeInvisibleOutlined, EyeTwoTone } from '@ant-design/icons';
import 'antd/dist/antd.css';   //还需要引入css样式
class Login extends Component{
    render(){
        return (
            <div>
                <div style={{width:'100%',marginTop:'2%',marginBottom:'2%'}}>
                    <div style={{width:'33%',float:'left',visibility:'hidden'}}>/</div>
                    <div style={{width:'33%',float:'left'}}><Input placeholder="输入用户名/手机号" /></div>
                    <div style={{width:'33%',float:'left',visibility:'hidden'}}>/</div>
                    <div style={{clear:'both'}}></div>
                </div>
                <div style={{width:'100%',marginBottom:'2%'}}>
                    <div style={{width:'33%',float:'left',visibility:'hidden'}}>/</div>
                    <div style={{width:'33%',float:'left'}}><Input.Password placeholder="输入密码" iconRender={visible => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)} /></div>
                    <div style={{width:'33%',float:'left',visibility:'hidden'}}>/</div>
                    <div style={{clear:'both'}}></div>
                </div>
                <div style={{width:'100%',marginTop:'2%',marginBottom:'2%'}}>
                    <div style={{width:'50%',float:'left',textAlign:'right',paddingRight:'2%'}}><Button size="large">登录</Button></div>
                    <div style={{width:'50%',float:'left',textAlign:'left',paddingLeft:'2%'}}><Button size="large">注册</Button></div>   
                    <div style={{clear:'both'}}></div> 
                </div>
            </div>
        );

    }

}

export default Login;