スポンサースポンサーになる

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

ログイン画面 React コンポーネントは、ログイン画面コンポーネントを表します。

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

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

ログイン画面プロパティ

プロパティ型デフォルト説明
<LoginScreen> プロパティ
openedbooleanfalseログイン画面を開閉し、初期状態を設定できます
animatebooleanモーダルをアニメーション付きで開閉するかどうか
containerElHTMLElement
string		モーダルをマウントする要素（デフォルトはアプリのルート要素）

ログイン画面イベント

イベント説明
<LoginScreen> イベント
loginScreenOpenログイン画面が開始アニメーションを開始したときにトリガーされるイベント
loginScreenOpenedログイン画面が開始アニメーションを完了した後にトリガーされるイベント
loginScreenCloseログイン画面がクローズアニメーションを開始したときにトリガーされるイベント
loginScreenClosedログイン画面がクローズアニメーションを完了した後にトリガーされるイベント

ログイン画面の開閉

ログイン画面の 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>
  );
};
ドキュメントを改善する
このページについて