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

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

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

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

プロパティ	型	デフォルト	説明
<LoginScreen> プロパティ
opened	boolean	false	ログイン画面を開閉し、初期状態を設定することができます。
animate	boolean		モーダルをアニメーション付きで開閉するかどうか
containerEl	HTMLElement string		モーダルをマウントする要素 (デフォルトはアプリのルート要素)

イベント	説明
<LoginScreen> イベント
loginScreenOpen	ログイン画面がオープニングアニメーションを開始するとトリガーされます。
loginScreenOpened	ログイン画面がオープニングアニメーションを完了するとトリガーされます。
loginScreenClose	ログイン画面がクロージングアニメーションを開始するとトリガーされます。
loginScreenClosed	ログイン画面がクロージングアニメーションを完了するとトリガーされます。

ログイン画面の open()/close() メソッドに加えて、

ログイン画面 API を使用して開閉できます。
opened プロパティに true または false を渡す
関連する loginScreenOpen プロパティ (開く場合) と loginScreenClose プロパティ (閉じる場合) を持つリンクまたはボタンをクリックする。

コンポーネントの .instance() メソッドを呼び出すことで、初期化されたログイン画面インスタンスにアクセスできます。例:

<LoginScreen bind:this={component}>...</LoginScreen>

<script>
  let component;

  // to get instance in some method
  component.instance()
</script>

例

<script>
  import {
    f7,
    Navbar,
    Page,
    LoginScreen,
    ListInput,
    List,
    ListItem,
    Block,
    Button,
    LoginScreenTitle,
    BlockFooter,
    ListButton,
  } from 'framework7-svelte';

  let loginScreenOpened = false;
  let username = '';
  let password = '';

  function signIn() {
    f7.dialog.alert(`Username: ${username}<br>Password: ${password}`, () => {
      f7.loginScreen.close();
    });
  }
</script>

<Page>
  <Navbar title="Login Screen" />
  <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" />
  </List>
  <!-- example-hidden-end -->

  <Block>
    <Button raised large fill loginScreenOpen=".demo-login-screen">As Overlay</Button>
  </Block>

  <Block>
    <Button raised large fill onClick={() => (loginScreenOpened = true)}>
      Open Via Prop Change
    </Button>
  </Block>

  <LoginScreen
    class="demo-login-screen"
    opened={loginScreenOpened}
    onLoginScreenClosed={() => {
      loginScreenOpened = false;
      console.log('foobar');
    }}
  >
    <Page loginScreen>
      <LoginScreenTitle>Framework7</LoginScreenTitle>
      <List form>
        <ListInput
          label="Username"
          type="text"
          placeholder="Your username"
          value={username}
          onInput={(e) => (username = e.target.value)}
        />
        <ListInput
          label="Password"
          type="password"
          placeholder="Your password"
          value={password}
          onInput={(e) => (password = e.target.value)}
        />
      </List>
      <List inset>
        <ListButton onClick={signIn}>Sign In</ListButton>
      </List>
      <BlockFooter>
        Some text about login information.<br />Lorem ipsum dolor sit amet, consectetur adipiscing
        elit.
      </BlockFooter>
    </Page>
  </LoginScreen>
</Page>

このドキュメントを改善する

このページについて

ログイン画面コンポーネント
ログイン画面のプロパティ
ログイン画面のイベント
ログイン画面の開閉
ログイン画面インスタンスへのアクセス
例

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

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

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

ログイン画面のイベント

ログイン画面の開閉

ログイン画面インスタンスへのアクセス

例