登录屏幕 React 组件
登录屏幕 React 组件表示登录屏幕组件。
登录屏幕组件
包含以下组件:
LoginScreen
- 登录屏幕元素LoginScreenTitle
- 登录屏幕标题元素
登录屏幕属性
属性 | 类型 | 默认 | 描述 |
---|---|---|---|
<LoginScreen> 属性 | |||
opened | 布尔值 | false | 允许打开/关闭登录屏幕并设置其初始状态 |
animate | 布尔值 | 模态是否应该以动画方式打开/关闭 | |
containerEl | HTMLElement 字符串 | 模态挂载到的元素(默认为应用根元素) |
登录屏幕事件
事件 | 描述 |
---|---|
<LoginScreen> 事件 | |
loginScreenOpen | 当登录屏幕开始打开动画时将触发事件 |
loginScreenOpened | 登录屏幕完成打开动画后触发事件 |
loginScreenClose | 当登录屏幕开始关闭动画时触发事件 |
loginScreenClosed | 登录屏幕完成关闭动画后触发事件 |
打开和关闭登录屏幕
除了 Login Screen open()/close() 方法外,您还可以通过以下方式打开和关闭它:
示例
login-screen.jsx
import React, { useState } from 'react';
import {
Navbar,
Page,
LoginScreen,
ListInput,
List,
ListItem,
Block,
Button,
LoginScreenTitle,
BlockFooter,
ListButton,
f7,
} from 'framework7-react';
export default () => {
const [loginScreenOpened, setLoginScreenOpened] = useState('');
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const signIn = () => {
f7.dialog.alert(`Username: ${username}<br>Password: ${password}`, () => {
f7.loginScreen.close();
});
};
return (
<Page>
<Navbar title="Login Screen"></Navbar>
<Block>
<p>
Framework7 comes with ready to use Login Screen layout. It could be used inside of page or
inside of popup (Embedded) or as a standalone overlay:
</p>
</Block>
{/* example-hidden-start */}
<List strong insetMd outlineIos>
<ListItem link="/login-screen-page/" title="As Separate Page"></ListItem>
</List>
{/* example-hidden-end */}
<Block>
<Button raised large fill loginScreenOpen=".demo-login-screen">
As Overlay
</Button>
</Block>
<Block>
<Button
raised
large
fill
onClick={() => {
setLoginScreenOpened(true);
}}
>
Open Via Prop Change
</Button>
</Block>
<LoginScreen
className="demo-login-screen"
opened={loginScreenOpened}
onLoginScreenClosed={() => {
setLoginScreenOpened(false);
}}
>
<Page loginScreen>
<LoginScreenTitle>Framework7</LoginScreenTitle>
<List form>
<ListInput
label="Username"
type="text"
placeholder="Your username"
value={username}
onInput={(e) => {
setUsername(e.target.value);
}}
/>
<ListInput
label="Password"
type="password"
placeholder="Your password"
value={password}
onInput={(e) => {
setPassword(e.target.value);
}}
/>
</List>
<List inset>
<ListButton onClick={signIn}>Sign In</ListButton>
<BlockFooter>
Some text about login information.
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</BlockFooter>
</List>
</Page>
</LoginScreen>
</Page>
);
};
分离登录屏幕页面
login-screen-page.jsx
import React, { useState } from 'react';
import {
Page,
LoginScreenTitle,
List,
ListInput,
ListButton,
BlockFooter,
f7,
} from 'framework7-react';
export default ({ f7router }) => {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const signIn = () => {
f7.dialog.alert(`Username: ${username}<br>Password: ${password}`, () => {
f7router.back();
});
};
return (
<Page noToolbar noNavbar noSwipeback loginScreen>
<LoginScreenTitle>Framework7</LoginScreenTitle>
<List form>
<ListInput
label="Username"
type="text"
placeholder="Your username"
value={username}
onInput={(e) => {
setUsername(e.target.value);
}}
/>
<ListInput
label="Password"
type="password"
placeholder="Your password"
value={password}
onInput={(e) => {
setPassword(e.target.value);
}}
/>
</List>
<List inset>
<ListButton onClick={signIn}>Sign In</ListButton>
<BlockFooter>
Some text about login information.
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</BlockFooter>
</List>
</Page>
);
};