怎么用Ant Design编写登录和注册页面

分类：软件问题作者：编程之家用户

今天小编给大家分享一下怎么用Ant Design编写登录和注册页面的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

一、登录

1.index.tsx页面

代码如下（示例）：

import { Form, Input, Button, Tabs, Row, Col } from 'antd';
import { Footer } from 'antd/lib/layout/layout';
import React from 'react';
import styles from './index.module.less';

const onFinish = (values: any) => {
  console.log('Received values of form: ', values);
};

const { TabPane } = Tabs;
function callback(key) {
  console.log(key);
}
export default function Login() {
  return (
    <div className={styles.bg}>
      <div className={styles.heard}>
        <div className={styles.cloud}>
          <img src="../logo.png" alt="logo" />
        </div>
        <h2 className={styles.title}>项目名称</h2>
      </div>
      <div className={styles.login_card}>
        <Tabs type="card" defaultActiveKey="1" onChange={callback} centered style={{ margin: '0 auto' }}>
          <TabPane tab="账户密码登录" key="1">
            <Form
              name="normal_login"
              className="login-form"
              initialValues={{ remember: true }}
              onFinish={onFinish}
            >
              <Form.Item
                name="username"
                rules={[{ required: true, message: '请输入手机号 / 用户名!' }]}
                style={{ borderBottom: '1px solid #DCDCDC' }}
              >
                <Input placeholder="请输入手机号 / 用户名" bordered={false} />
              </Form.Item>
              <Form.Item
                name="password"
                rules={[{ required: true, message: '请输入密码!' }]}
                style={{ borderBottom: '1px solid #DCDCDC' }}
              >
                <Input
                  bordered={false}
                  type="password"
                  placeholder="请输入密码"
                />
              </Form.Item>


              <Form.Item>
                <a style={{ color: '#8C8D9B' }} href="">创建账号</a>
              </Form.Item>

              <Form.Item>
                <Button type="primary" htmlType="submit" block style={{ height: '56PX', borderRadius: '12PX' }}>
                  登录
                </Button>
              </Form.Item>
            </Form>

          </TabPane>

          <TabPane tab="验证码登录" key="2">
            <Form
              name="normal_login"
              className="login-form"
              initialValues={{ remember: true }}
              onFinish={onFinish}
            >
              <Form.Item
                name="phone"
                rules={[{ required: true, message: '请输入手机号!' }]}
                style={{ borderBottom: '1px solid #DCDCDC' }}
              >
                <Input placeholder="请输入手机号" bordered={false} />
              </Form.Item>
              <Form.Item
                name="captcha"
                rules={[{ required: true, message: '请输入验证码!' }]}
                style={{ borderBottom: '1px solid #DCDCDC' }}
              >
                <Row>
                  <Col span={18}>
                    <Input
                      bordered={false}
                      type="password"
                      placeholder="请输入验证码"
                    />
                  </Col>
                  <Col span={6} style={{ float: 'right' }}>
                    <Button type="link" style={{ color: '#151830', fontWeight: 'bold' }}>发送验证码</Button>
                  </Col>
                </Row>
              </Form.Item>


              <Form.Item>
                <a style={{ color: '#8C8D9B' }} href="">创建账号</a>
              </Form.Item>

              <Form.Item>
                <Button type="primary" htmlType="submit" block style={{ height: '56PX', borderRadius: '12PX' }}>
                  登录
                </Button>
              </Form.Item>


            </Form>

          </TabPane>

        </Tabs>

       <Button size="large" shape="circle"><img src="/weixin.png" alt="微信图片" /></Button>

      </div>
      <Footer className={styles.footer}>
        <text>
          底部说明
        </text>
      </Footer>
    </div>
  )
}

2.index.module.less

代码如下（示例）：

.bg {
  height: 900px;
  background: linear-gradient(180deg, #a0d7e7, #6c5dd3);
  margin: auto;
  // padding: 200px;
  text-align: center;
  justify-content: center;
  display: flex;
  align-items: center;
}

.login_card {
  width: 520px;
  height: 450px;
  background: #f2f3f7;
  border-radius: 20px;
  margin: auto;
  text-align: center;
  justify-content: center;
  padding: 51px 60px;
}

.login-button {
  width: 400px;
  height: 56px;
  background: #6c5dd3;
  border-radius: 12px;
}

.heard {
  position: absolute;
  display: flex;
  top: 264px;
}
.title {
  width: 315px;
  font-size: 30px;
  font-family: Arial;
  font-weight: bold;
  color: #151830;
}
.cloud {
  width: 100px;
  height: 72px;
  line-height: 72px;
  background-image: url("../../../../public/img/cloud.png");
}
.cloud img {
  width: 40px;
  height: 40px;
}
.footer {
  width: 100%;
  height: 12px;
  font-size: 10px;
  font-family: Microsoft YaHei;
  font-weight: 300;
  color: #151830;
  background: none;
  bottom: 34px;
  left: 0;
  position: absolute;
}

二，注册

注册页面代码和样式，不多描述，直接看图

怎么用Ant Design编写登录和注册页面

1.index.tsx

代码如下（示例）：

import React from 'react';
import { Form, Input, Button, Checkbox, Tabs, Row, Col } from 'antd';
import styles from './index.module.less';
import { Footer } from 'antd/lib/layout/layout';

const onFinish = (values: any) => {
  console.log('Received values of form: ', values);
};
export default function Register() {
  return (
    <div className={styles.bg}>
      <div className={styles.heard}>
        <div className={styles.cloud}>
          <img src="../logo.png" alt="logo" />
        </div>
        <h2 className={styles.title}>系统名称</h2>
      </div>
      <div className={styles.login_card}>
        <Form
          name="normal_login"
          className="login-form"
          initialValues={{ remember: true }}
          onFinish={onFinish}
        >
          <Form.Item
            name="phone"
            rules={[{ required: true, message: '请输入手机号!' }]}
            style={{ borderBottom: '1px solid #DCDCDC' }}
          >
            <Input placeholder="请输入手机号" bordered={false} />
          </Form.Item>
          <Form.Item
            name="captcha"
            rules={[{ required: true, message: '请输入验证码!' }]}
            style={{ borderBottom: '1px solid #DCDCDC' }}
          >
            <Row>
              <Col span={18}>
                <Input
                  bordered={false}
                  type="password"
                  placeholder="请输入验证码"
                />
              </Col>
              <Col span={6} style={{ float: 'right' }}>
                <Button type="link" style={{ color: '#151830', fontWeight: 'bold' }}>发送验证码</Button>
              </Col>
            </Row>
          </Form.Item>
          <Form.Item
            name="password"
            rules={[{ required: true, message: '请设置密码!' }]}
            style={{ borderBottom: '1px solid #DCDCDC' }}
          >
            <Input
              bordered={false}
              type="password"
              placeholder="请设置密码"
            />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[{ required: true, message: '请重复密码!' }]}
            style={{ borderBottom: '1px solid #DCDCDC' }}
          >
            <Input
              bordered={false}
              type="password"
              placeholder="请重复密码"
            />
          </Form.Item>

          <Form.Item>
            已有帐号，<a href="#" rel="external nofollow" >点击登录</a>
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit" block style={{ height: '56PX', borderRadius: '12PX' }}>
              登录
            </Button>
          </Form.Item>
          <Form.Item name="" valuePropName="checked" style={{ textAlign: 'left' }}>
            <Checkbox style={{ color: '#CCCCCC' }}>我已阅读并同意《<a>用户服务协议</a>》</Checkbox>
          </Form.Item>
          <Button size="large" shape="circle"><img src="../weixin.png" alt="微信图片" /></Button>

        </Form>
      </div>

      <Footer className={styles.footer}>
        <text>
          底部说明
        </text>
      </Footer>
    </div>
  );
}

2.index.module.less

代码如下（示例）：

.bg {
  height: 900px;
  background: linear-gradient(180deg, #a0d7e7, #6c5dd3);
  margin: auto;
  padding: 150px;
  text-align: center;
  justify-content: center;
  display: flex;
  align-items: center;
}

.login_card {
  width: 520px;
  height: 540px;
  background: #f2f3f7;
  border-radius: 20px;
  margin: auto;
  text-align: center;
  justify-content: center;
  padding: 51px 60px;
}

.login-button {
  width: 400px;
  height: 56px;
  background: #6c5dd3;
  border-radius: 12px;
}
.heard {
  position: absolute;
  display: flex;
  top: 218px;
}
.title {
  width: 315px;
  font-size: 30px;
  font-family: Arial;
  font-weight: bold;
  color: #151830;
}
.cloud {
  width: 100px;
  height: 72px;
  line-height: 72px;
  background-image: url("../../../../public/img/cloud.png");
}
.cloud img {
  width: 40px;
  height: 40px;
}
.footer {
  width: 100%;
  height: 12px;
  font-size: 10px;
  font-family: Microsoft YaHei;
  font-weight: 300;
  color: #151830;
  background: none;
  bottom: 34px;
  left: 0;
  position: absolute;
}

总结

好像没啥重点，div垂直居中算个重点吧。

  justify-content: center;
  display: flex;
  align-items: center;

以上就是“怎么用Ant Design编写登录和注册页面”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程之家行业资讯频道。

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

php字符串拼接要注意什么
在PHP中进行字符串拼接时，应注意以下几点： 使用 .“运算符进行字符串拼接：在PHP中，可以使用”. 运算符来连接两个字符串。 使用双引号或单引号来包裹字符...
python全局变量定义的方法是什么
在Python中，全局变量可以在程序的任何地方进行定义，通常在函数外部进行定义。全局变量可以在整个程序中访问，而不仅仅是在函数内部。要定义一个全局变量，只
电脑显示器上auto指的是什么意思
今天小编给大家分享一下电脑显示器上auto指的是什么意思的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考
ai建立剪切蒙版后如何移动里面的图片
本文小编为大家详细介绍“ai建立剪切蒙版后如何移动里面的图片”，内容详细，步骤清晰，细节处理妥当，希望这篇“ai建立剪切蒙版后如何移动里面的图片”文章能帮...
windows中格式化d盘的后果是什么
这篇文章主要讲解了“windows中格式化d盘的后果是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“wind...
otf文件有哪些特点
这篇“otf文件有哪些特点”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章...
wpsystem文件夹有什么作用
这篇文章主要介绍“wpsystem文件夹有什么作用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“wpsystem文件夹有什
ps单位指的是什么
这篇文章主要介绍了ps单位指的是什么的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇ps单位指的是什么文章都会有所收获，下面我...
ipv6对网速有没有提升
这篇文章主要介绍“ipv6对网速有没有提升”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“ipv6对网速有没有提升”文...
islide是什么及有什么作用
本文小编为大家详细介绍“islide是什么及有什么作用”，内容详细，步骤清晰，细节处理妥当，希望这篇“islide是什么及有什么作用”文章能帮助大家解决疑惑，下面...
UAC被禁用有哪些影响
本篇内容主要讲解“UAC被禁用有哪些影响”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“UAC被禁用有哪些影响”...
svchost.exe可不可以关掉
今天小编给大家分享一下svchost.exe可不可以关掉的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，
win10有没有32位版本
这篇文章主要介绍“win10有没有32位版本”，在日常操作中，相信很多人在win10有没有32位版本问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，
vlookup如何引用别的表格数据
这篇文章主要介绍了vlookup如何引用别的表格数据的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vlookup如何引用别的表格数据文...
.json文件有什么作用
本文小编为大家详细介绍“.json文件有什么作用”，内容详细，步骤清晰，细节处理妥当，希望这篇“.json文件有什么作用”文章能帮助大家解决疑惑，下面跟着小编的...
vlookup函数的参数是什么意思
这篇文章主要介绍了vlookup函数的参数是什么意思的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vlookup函数的参数是什么意思文...
wmiprvse.exe程序有什么作用
本篇内容介绍了“wmiprvse.exe程序有什么作用”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情...
Windows wifi的ip地址指的是什么
这篇“Windows wifi的ip地址指的是什么”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅...
video接口指的是什么
今天小编给大家分享一下video接口指的是什么的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大...
路由器wps有哪些优缺点
本篇内容介绍了“路由器wps有哪些优缺点”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧...
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot