Login Screen Svelte コンポーネント

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

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

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 プロパティを使って (閉じるために)

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

ログイン画面の初期化されたインスタンスにアクセスするには、.instance()コンポーネントのメソッドを呼び出します。例えば、以下のようになります。

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

<script>
  let component;

  // あるメソッドでインスタンスを取得する
  component.instance()
</script>

Examples

<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={() => loginScreenOpened = true}>Open Via Prop Change</Button>
  </Block>

  <LoginScreen
    class="demo-login-screen"
    opened={loginScreenOpened}
    onLoginScreenClosed={() => loginScreenOpened = false}
  >
    <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>
        <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>

<script>
  import {f7, Page, LoginScreenTitle, List, ListInput, ListButton, BlockFooter, Navbar, Block, ListItem, Button, LoginScreen} 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 noToolbar noNavbar noSwipeback 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>
    <ListButton onClick={signIn}>Sign In</ListButton>
  </List>
  <BlockFooter>Some text about login information.<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit.</BlockFooter>
</Page>

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

  export let f7router;

  let username = '';
  let password = '';

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