-
-
Notifications
You must be signed in to change notification settings - Fork 46
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(page5): add new login component..
- Loading branch information
1 parent
c48e5d0
commit f8767f8
Showing
18 changed files
with
850 additions
and
137 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,307 @@ | ||
# @react-login-page/page5 | ||
|
||
[![npm version](https://img.shields.io/npm/v/@react-login-page/page5.svg)](https://www.npmjs.com/package/@react-login-page/page5) | ||
[![Downloads](https://img.shields.io/npm/dm/@react-login-page/page5.svg?style=flat)](https://www.npmjs.com/package/@react-login-page/page5) | ||
|
||
<!--rehype:ignore:start--> | ||
<a href="https://uiwjs.github.io/react-login-page"> | ||
<img width="571" alt="login-page" src="https://user-images.githubusercontent.com/1680273/234231103-0bdceee8-2407-43b3-a2fe-017d344d5764.png"> | ||
</a> | ||
|
||
<!--rehype:ignore:end--> | ||
|
||
## Install | ||
|
||
```bash | ||
$ npm install @react-login-page/page5 --save | ||
``` | ||
|
||
## Usage | ||
|
||
```jsx | ||
import React from 'react'; | ||
import Login from '@react-login-page/page5'; | ||
|
||
const Demo = () => <Login style={{ height: 380 }} />; | ||
|
||
export default Demo; | ||
``` | ||
|
||
## Modify Controls | ||
|
||
```jsx mdx:preview | ||
import React from 'react'; | ||
import LoginPage, { Username, Password, Submit, Title, Logo } from '@react-login-page/page5'; | ||
import LoginLogo from 'react-login-page/logo'; | ||
|
||
const styles = { height: 460 }; | ||
|
||
const Demo = () => ( | ||
<div style={styles}> | ||
<LoginPage> | ||
<Username name="userUserName" /> | ||
<Password placeholder="请输入密码" name="userPassword" /> | ||
<Submit>提交</Submit> | ||
<Submit type="reset" name="reset"> | ||
重置 | ||
</Submit> | ||
<Title /> | ||
<Logo> | ||
<LoginLogo /> | ||
</Logo> | ||
</LoginPage> | ||
</div> | ||
); | ||
|
||
export default Demo; | ||
``` | ||
|
||
## Hide Controls | ||
|
||
Use `visible={false}` to hide controls. | ||
|
||
```jsx mdx:preview | ||
import React from 'react'; | ||
import LoginPage, { Reset, Logo, Password, Footer } from '@react-login-page/page5'; | ||
import LoginLogo from 'react-login-page/logo-rect'; | ||
|
||
const Demo = () => ( | ||
<LoginPage style={{ height: 480 }}> | ||
<Logo> | ||
<LoginLogo /> | ||
</Logo> | ||
<Password visible={false} /> | ||
<Footer> | ||
Not a member? <a href="#">Sign up now</a> | ||
</Footer> | ||
</LoginPage> | ||
); | ||
|
||
export default Demo; | ||
``` | ||
## Add Controls | ||
```jsx mdx:preview | ||
import React from 'react'; | ||
import LoginPage, { Reset, Logo, Footer, Username, Password, Input } from '@react-login-page/page5'; | ||
import LoginLogo from 'react-login-page/logo-rect'; | ||
|
||
const imgSrc = | ||
'data:image/png;base64,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'; | ||
|
||
const Demo = () => ( | ||
<LoginPage style={{ height: 820 }}> | ||
<Logo> | ||
<LoginLogo /> | ||
</Logo> | ||
<Username rename="subtitle" visible={false} index={0}> | ||
欢迎登录页面 | ||
</Username> | ||
{/* hide default username field */} | ||
<Username visible={false} /> | ||
<Username rename="user" index={3} placeholder="修改了 name 字段" /> | ||
<Username rename="username_rule" visible={false} index={4}> | ||
用户名规则 | ||
</Username> | ||
<Password index={1} /> | ||
<Input name="phone" index={2} placeholder="Phone number"> | ||
<img src={imgSrc} height={38} /> | ||
</Input> | ||
<Footer> | ||
Not a member? <a href="#">Sign up now</a> | ||
</Footer> | ||
</LoginPage> | ||
); | ||
|
||
export default Demo; | ||
``` | ||
## Modify default control `name` | ||
Modify the string that specifies the **`name`** of the input control by default | ||
1. remove default `name=username` controls | ||
```jsx | ||
<Username visible={false} /> | ||
``` | ||
2. add `name=user` controls | ||
```jsx | ||
<Username rename="user" index={3} placeholder="修改了 name 字段" /> | ||
``` | ||
## Modify Color Style | ||
```jsx mdx:preview | ||
import React from 'react'; | ||
import Login from '@react-login-page/page5'; | ||
|
||
const css = { | ||
'--login-bg': '#5b6ef4', | ||
'--login-color': '#fff', | ||
'--login-input': '#333', | ||
'--login-input-bg': '#fff', | ||
'--login-input-before': 'rgb(62 41 255 / 15%)', | ||
'--login-input-after': 'rgb(49 141 255 / 20%)', | ||
'--login-btn': '#fff', | ||
'--login-btn-bg': '#5b6ef4', | ||
'--login-btn-focus': '#3648c6', | ||
'--login-btn-hover': '#3648c6', | ||
'--login-btn-active': '#5b6ef4', | ||
}; | ||
|
||
const Demo = () => <Login style={{ height: 380, ...css }} />; | ||
|
||
export default Demo; | ||
``` | ||
Use css variables to override default color values | ||
```css | ||
.login-page5 { | ||
--login-bg: #f45b69; | ||
--login-inner-bg: white; | ||
--login-color: #fff; | ||
--login-input: #333; | ||
--login-input-bg: #fff; | ||
--login-input-before: rgba(69, 105, 144, 0.15); | ||
--login-input-after: rgba(2, 128, 144, 0.2); | ||
--login-btn: #fff; | ||
--login-btn-bg: #f45b69; | ||
--login-btn-focus: #f24353; | ||
--login-btn-hover: #f24353; | ||
--login-btn-active: #d82a3b; | ||
} | ||
``` | ||
Custom CSS style overrides | ||
```css | ||
.login-page5 section button:focus { | ||
box-shadow: 0 0 0 2px rgba(0, 142, 240, 0.26); | ||
} | ||
.login-page5 section button:hover { | ||
background-color: #0070bd; | ||
} | ||
.login-page5 section button:active { | ||
background-color: #00528a; | ||
} | ||
``` | ||
## Light & Dark Theme | ||
```css | ||
[data-color-mode*='dark'] .login-page5, | ||
.login-page5 { | ||
--login-bg: #f45b69; | ||
--login-inner-bg: white; | ||
--login-color: #fff; | ||
--login-input: #333; | ||
--login-input-bg: #fff; | ||
--login-input-before: rgba(69, 105, 144, 0.15); | ||
--login-input-after: rgba(2, 128, 144, 0.2); | ||
--login-btn: #fff; | ||
--login-btn-bg: #f45b69; | ||
--login-btn-focus: #f24353; | ||
--login-btn-hover: #f24353; | ||
--login-btn-active: #d82a3b; | ||
} | ||
[data-color-mode*='light'] .login-page5 { | ||
--login-bg: #f45b69; | ||
--login-inner-bg: white; | ||
--login-color: #fff; | ||
--login-input: #333; | ||
--login-input-bg: #fff; | ||
--login-input-before: rgba(69, 105, 144, 0.15); | ||
--login-input-after: rgba(2, 128, 144, 0.2); | ||
--login-btn: #fff; | ||
--login-btn-bg: #f45b69; | ||
--login-btn-focus: #f24353; | ||
--login-btn-hover: #f24353; | ||
--login-btn-active: #d82a3b; | ||
} | ||
``` | ||
## API | ||
Components be provided to modify control properties and perform other related functions. | ||
```jsx | ||
import LoginPage from '@react-login-page/page5'; | ||
// buttons | ||
import { Reset, Submit } from '@react-login-page/page5'; | ||
// blocks | ||
import { Logo, Title, Footer } from '@react-login-page/page5'; | ||
// fields | ||
import { Username, Password } from '@react-login-page/page5'; | ||
// Basic Components | ||
import { Button, Input } from '@react-login-page/page5'; | ||
// or | ||
import { Button, Input } from 'react-login-page'; | ||
|
||
<LoginPage> | ||
<Password index={2} /> | ||
</LoginPage> | ||
|
||
<Input name="phone" index={1} placeholder="Phone number"> | ||
<img src="..." height={38} /> | ||
</Input> | ||
|
||
// Define the order of `Password` controls | ||
<Password index={2} /> | ||
|
||
// Hiding the `Password` control | ||
<Password visible={false} /> | ||
|
||
// Add input control | ||
<Input name="phone" index={1} placeholder="Phone number" /> | ||
|
||
// Add footer content | ||
<Footer> | ||
Not a member? <a href="#">Sign up now</a> | ||
</Footer> | ||
|
||
// Modify logo image | ||
<Logo>⚛️</Logo> | ||
``` | ||
Use [dot notation](https://legacy.reactjs.org/docs/jsx-in-depth.html#using-dot-notation-for-jsx-type) components. | ||
```jsx | ||
import Login from '@react-login-page/page5'; | ||
|
||
<Login> | ||
<Login.Password index={2} /> | ||
</Login> | ||
|
||
// Define the order of `Password` controls | ||
<Login.Password index={2} /> | ||
|
||
// Hiding the `Password` control | ||
<Login.Password visible={false} /> | ||
|
||
// Add footer content | ||
<Login.Footer> | ||
Not a member? <a href="#">Sign up now</a> | ||
</Login.Footer> | ||
|
||
// Modify logo image | ||
<Login.Logo>⚛️</Login.Logo> | ||
``` | ||
## Contributors | ||
As always, thanks to our amazing contributors! | ||
<a href="https://github.com/uiwjs/react-login-page/graphs/contributors"> | ||
<img src="https://uiwjs.github.io/react-login-page/CONTRIBUTORS.svg" /> | ||
</a> | ||
Made with [contributors](https://github.com/jaywcjlove/github-action-contributors). | ||
## License | ||
Licensed under the MIT License. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,52 @@ | ||
{ | ||
"name": "@react-login-page/page5", | ||
"version": "0.4.0", | ||
"description": "Some `react` login pages, which can be used quickly after installation.", | ||
"homepage": "https://uiwjs.github.io/react-login-page", | ||
"author": "kenny wong <[email protected]>", | ||
"license": "MIT", | ||
"main": "./cjs/index.js", | ||
"module": "./esm/index.js", | ||
"scripts": { | ||
"watch": "tsbb watch src/*.tsx --use-babel", | ||
"build": "tsbb build src/*.tsx --use-babel", | ||
"test": "tsbb test --env=jsdom", | ||
"coverage": "tsbb test --env=jsdom --coverage --bail" | ||
}, | ||
"repository": { | ||
"type": "git", | ||
"url": "https://github.com/uiwjs/react-login-page.git" | ||
}, | ||
"files": [ | ||
"README.md", | ||
"src", | ||
"esm", | ||
"cjs" | ||
], | ||
"peerDependencies": { | ||
"@babel/runtime": ">=7.11.0", | ||
"react": ">=16.8.0", | ||
"react-dom": ">=16.8.0" | ||
}, | ||
"dependencies": { | ||
"react-login-page": "0.4.0" | ||
}, | ||
"keywords": [ | ||
"react", | ||
"login", | ||
"login-page", | ||
"login-pages", | ||
"react-login", | ||
"react-login-page", | ||
"editor", | ||
"syntax", | ||
"ide", | ||
"code" | ||
], | ||
"jest": { | ||
"coverageReporters": [ | ||
"lcov", | ||
"json-summary" | ||
] | ||
} | ||
} |
Oops, something went wrong.