Login Screen React Component
- Login Screen Components
- Login Screen Properties
- Login Screen Methods
- Login Screen Events
- Open And Close Login Screen
- Access To Login Screen Instance
- Examples
Login Screen React component represents Login Screen component.
Login Screen Components
There are following components included:
LoginScreen
/F7LoginScreen
- login screen elementLoginScreenTitle
/F7LoginScreenTitle
- login screen title element
Login Screen Properties
Prop | Type | Default | Description |
---|---|---|---|
<LoginScreen> properties | |||
opened | boolean | false | Allows to open/close Login Screen and set its initial state |
Login Screen Methods
<LoginScreen> methods | |
---|---|
.open(animate) | Open login screen |
.close(animate) | Close login screen |
Login Screen Events
Event | Description |
---|---|
<LoginScreen> events | |
loginScreenOpen | Event will be triggered when Login Screen starts its opening animation |
loginScreenOpened | Event will be triggered after Login Screen completes its opening animation |
loginScreenClose | Event will be triggered when Login Screen starts its closing animation |
loginScreenClosed | Event will be triggered after Login Screen completes its closing animation |
Open And Close Login Screen
In addition to Login Screen open()/close() methods, you can open and close it:
- using Login Screen API
- by passing
true
orfalse
to itsopened
prop - by clicking on Link or Button with relevant
loginScreenOpen
property (to open it) andloginScreenClose
property to close it
Access To Login Screen Instance
You can access Login Screen initialized instance by accessing .f7LoginScreen
component's property.
Examples
export default class extends React.Component {
constructor(props) {
super(props);
this.state = {
loginScreenOpened: false,
username: '',
password: '',
};
}
render() {
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>
<List>
<ListItem link="/login-screen-page/" title="As Separate Page"></ListItem>
</List>
<Block>
<Button raised large fill loginScreenOpen=".demo-login-screen">As Overlay</Button>
</Block>
<Block>
<Button raised large fill onClick={() => {this.setState({loginScreenOpened : true})}}>Open Via Prop Change</Button>
</Block>
<LoginScreen className="demo-login-screen" opened={this.state.loginScreenOpened} onLoginScreenClosed={() => {this.setState({loginScreenOpened : false})}}>
<Page loginScreen>
<LoginScreenTitle>Framework7</LoginScreenTitle>
<List form>
<ListInput
label="Username"
type="text"
placeholder="Your username"
value={this.state.username}
onInput={(e) => {
this.setState({ username: e.target.value});
}}
/>
<ListInput
label="Password"
type="password"
placeholder="Your password"
value={this.state.password}
onInput={(e) => {
this.setState({ password: e.target.value});
}}
/>
</List>
<List>
<ListButton onClick={this.signIn.bind(this)}>Sign In</ListButton>
<BlockFooter>Some text about login information.<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit.</BlockFooter>
</List>
</Page>
</LoginScreen>
</Page>
)
}
signIn() {
const self = this;
const app = self.$f7;
app.dialog.alert(`Username: ${self.state.username}<br>Password: ${self.state.password}`, () => {
app.loginScreen.close();
});
}
};
Separate Login Screen Page
export default class extends React.Component {
constructor(props) {
super(props);
this.state = {
username: '',
password: '',
};
}
render() {
return (
<Page noToolbar noNavbar noSwipeback loginScreen>
<LoginScreenTitle>Framework7</LoginScreenTitle>
<List form>
<ListInput
label="Username"
type="text"
placeholder="Your username"
value={this.state.username}
onInput={(e) => {
this.setState({ username: e.target.value});
}}
/>
<ListInput
label="Password"
type="password"
placeholder="Your password"
value={this.state.password}
onInput={(e) => {
this.setState({ password: e.target.value});
}}
/>
</List>
<List>
<ListButton onClick={this.signIn.bind(this)}>Sign In</ListButton>
<BlockFooter>Some text about login information.<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit.</BlockFooter>
</List>
</Page>
)
}
signIn() {
const self = this;
const app = self.$f7;
const router = self.$f7router;
app.dialog.alert(`Username: ${self.state.username}<br>Password: ${self.state.password}`, () => {
router.back();
});
}
}