Login Screen React Component

There are following components included:

LoginScreen - login screen element
LoginScreenTitle - login screen title element

Prop	Type	Default	Description
<LoginScreen> properties
opened	boolean	false	Allows to open/close Login Screen and set its initial state
animate	boolean		Whether the modal should be opened/closed with animation or not
containerEl	HTMLElement string		Element to mount modal to (default to app root element)

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

In addition to Login Screen open()/close() methods, you can open and close it:

using Login Screen API
by passing true or false to its opened prop
by clicking on Link or Button with relevant loginScreenOpen property (to open it) and loginScreenClose property to close it

Examples

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>
  );
};

Separate Login Screen Page

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>
  );
};

Improve this Doc

On this page

Login Screen Components
Login Screen Properties
Login Screen Events
Open And Close Login Screen
Examples

Login Screen React Component

Login Screen Components

Login Screen Properties

Login Screen Events

Open And Close Login Screen

Examples

Separate Login Screen Page