技術標籤：前端js+cssreact+antdreactjsvuehtmlnode.js

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;