太酷了！十几款封装好的界面炫酷的登录页组件

程序员老鱼

发布于 2023-11-23 15:05:46

1.7K00

代码可运行

文章被收录于专栏：前端实验室前端实验室

运行总次数：0

代码可运行

大家注意：因为微信最近又改了推送机制，经常有小伙伴说错过了之前被删的文章，或者一些限时福利，错过了就是错过了。所以建议大家加个星标，就能第一时间收到推送。

「前端实验室」 专注分享 Github、Gitee 等开源社区优质的前端项目、前端技术、前端学习资源以及前端资讯等各种有趣实用的前端内容。大家好，我是「前端实验室」爱分享的了不起~

今天给大家推荐一个漂亮的 React 登录页组件。内含十几款封装好的登录页，界面炫酷、即插即用，用来快速构建登录页的 React 组件，简直不要太酷了！

React Login Pages

React Login Pages 提供基于基础组件的封装登录页面组件，方便快速安装使用。这些组件有助于简化创建登录页面的过程，并提供灵活的 API 来修改和打包这些组件。

安装

npm install react-login-page --save

或者按照单组件
npm install @react-login-page/page3 --save

如何使用

比如我们想要下图效果的登录页

import React from 'react';
import Login from '@react-login-page/page3';
import defaultBannerImage from '@react-login-page/page3/bg.jpeg';

const Demo = () => (
  <Login style={{ height: 580 }}>
    <Login.Banner style={{ backgroundImage: `url(${defaultBannerImage})` }} />
    <Login.Password>
      <div>xx</div>
    </Login.Password>
  </Login>
);

export default Demo;

如果你想修改控制器，比如：

<Email name="userUserName" />
<Password placeholder="请输入密码" label="密码" name="userPassword" />
<Submit>提交</Submit>
<Reset disabled>重置</Reset>
<Welcome>欢迎回来！ 登录您的帐户以查看今天的客户：</Welcome>

隐藏控制器

使用visible={false} 用以隐藏控制器，例如：

<Password visible={false} />

添加内容在按钮后

<ButtonAfter>
 Forgot <a href="#">Username / Password?</a>
</ButtonAfter>

还有更多如颜色、主题控制，作者提供了很多API供开发者调用，大家可以自己体验噢~

Github地址：https://github.com/uiwjs/react-login-page

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2023-11-23，如有侵权请联系 cloudcommunity@tencent.com 删除

打包

本文分享自前端实验室微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度