Login Screen Vue Component

Login Screen Components
Login Screen Properties
Login Screen Events
Login Screen v-model
Open And Close Login Screen
Examples

There are following components included:

f7-login-screen - login screen element
f7-login-screen-title - login screen title element

Prop	Type	Default	Description
<f7-login-screen> 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
container-el	HTMLElement string		Element to mount modal to (default to app root element)

Event	Description
<f7-login-screen> events
loginscreen:open	Event will be triggered when Login Screen starts its opening animation
loginscreen:opened	Event will be triggered after Login Screen completes its opening animation
loginscreen:close	Event will be triggered when Login Screen starts its closing animation
loginscreen:closed	Event will be triggered after Login Screen completes its closing animation

<template>
  <f7-page>
    <f7-login-screen v-model:opened="isOpened">
      ...
    </f7-login-screen>
    <p>Modal is opened: {{ isOpened }}</p>
  </f7-page>
</template>
<script>
  export default {
    data() {
      return {
        isOpened: false,
      };
    }
  };
</script>

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 login-screen-open property (to open it) and login-screen-close property to close it

Examples

<template>
<f7-page>
  <f7-navbar title="Login Screen"></f7-navbar>
  <f7-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>
  </f7-block>

  <f7-list>
    <f7-list-item link="/login-screen-page/" title="As Separate Page"></f7-list-item>
  </f7-list>

  <f7-block>
    <f7-button raised large fill login-screen-open=".demo-login-screen">As Overlay</f7-button>
  </f7-block>

  <f7-block>
    <f7-button raised large fill @click="loginScreenOpened = true">Open Via Prop Change</f7-button>
  </f7-block>

  <f7-login-screen class="demo-login-screen" :opened="loginScreenOpened" @loginscreen:closed="loginScreenOpened = false">
    <f7-page login-screen>
      <f7-login-screen-title>Framework7</f7-login-screen-title>
      <f7-list form>
        <f7-list-input
          label="Username"
          type="text"
          placeholder="Your username"
          :value="username"
          @input="username = $event.target.value"
        ></f7-list-input>
        <f7-list-input
          label="Password"
          type="password"
          placeholder="Your password"
          :value="password"
          @input="password = $event.target.value"
        ></f7-list-input>
      </f7-list>
      <f7-list>
        <f7-list-button @click="signIn">Sign In</f7-list-button>
        <f7-block-footer>Some text about login information.<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</f7-block-footer>
      </f7-list>
    </f7-page>
  </f7-login-screen>
</f7-page>
</template>
<script>
  import { f7 } from 'framework7-vue';

  export default {
    data() {
      return {
        loginScreenOpened: false,
        username: '',
        password: '',
      };
    },
    methods: {
      signIn() {
        f7.dialog.alert(`Username: ${self.username}<br>Password: ${self.password}`, () => {
          f7.loginScreen.close();
        });
      },
    },
  }
</script>

Separate Login Screen Page

<template>
<f7-page no-toolbar no-navbar no-swipeback login-screen>
  <f7-login-screen-title>Framework7</f7-login-screen-title>
  <f7-list form>
    <f7-list-input
      label="Username"
      type="text"
      placeholder="Your username"
      :value="username"
      @input="username = $event.target.value"
    ></f7-list-input>
    <f7-list-input
      label="Password"
      type="password"
      placeholder="Your password"
      :value="password"
      @input="password = $event.target.value"
    ></f7-list-input>
  </f7-list>
  <f7-list>
    <f7-list-button @click="signIn">Sign In</f7-list-button>
    <f7-block-footer>Some text about login information.<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</f7-block-footer>
  </f7-list>
</f7-page>
</template>
<script>
  import { f7 } from 'framework7-vue';

  export default {
    props: {
      f7router: Object,
    },
    data() {
      return {
        username: '',
        password: '',
      };
    },
    methods: {
      signIn() {
        const self = this;

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

Login Screen Vue Component

Login Screen Components

Login Screen Properties

Login Screen Events

Login Screen v-model

Open And Close Login Screen

Examples

Separate Login Screen Page