Login Screen Reactコンポーネント

ログイン画面コンポーネント

以下のコンポーネントが含まれています。

LoginScreen - ログイン画面の要素
LoginScreenTitle - ログイン画面のタイトル要素

ログイン画面のプロパティ

Prop	Type	Default	Description
<LoginScreen> properties
opened	boolean	false	ログイン画面の開閉や、初期状態の設定を行います。
animate	boolean		モーダルの開閉にアニメーションを使用するかどうか。
containerEl	HTMLElement string		モーダルをマウントする要素 (デフォルトはアプリのルート要素)

ログイン画面のイベント

Event	Description
<LoginScreen> events
loginScreenOpen	Login Screenがオープニングアニメーションを開始したときにイベントが発生します。
loginScreenOpened	ログイン画面のオープニングアニメーションが完了した後にイベントが発生する
loginScreenClose	ログイン画面が閉じるアニメーションを開始したときにイベントが発生する
loginScreenClosed	イベントは、ログイン画面が閉じるアニメーションを完了した後にトリガされます。

ログイン画面のオープンとクローズ

ログイン画面のopen()/close()メソッドに加えて、ログイン画面を開いたり閉じたりすることができます。

Login Screen APIを使って、以下のように開閉できます。
openenedのpropにtrueまたはfalse`を渡す
関連する loginScreenOpen プロパティを持つリンクまたはボタンをクリックして (開くために)、loginScreenClose プロパティを使って (閉じるために)

Examples

import React, { useState } from 'react';
import {
  f7,
  Page,
  LoginScreenTitle,
  List,
  ListInput,
  ListButton,
  BlockFooter,
  Navbar,
  Block,
  ListItem,
  Button,
  LoginScreen,
} from 'framework7-react';

export default () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [loginScreenOpened, setLoginScreenOpened] = useState(false);

  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>

  <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={() => {
        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>
        <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>
  );
};

独立したログイン画面のページ

import React, { useState } from 'react';
import {
  f7,
  Page,
  LoginScreenTitle,
  List,
  ListInput,
  ListButton,
  BlockFooter,
} 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>
    <ListButton onClick={signIn}>Sign In</ListButton>
    <BlockFooter>
      Some text about login information.
      <br />
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </BlockFooter>
  </List>
    </Page>
  );
};