Login Screen Svelte Component

Login Screen Svelte component represents Login Screen component.

Login Screen Components

There are following components included:

Login Screen Properties

PropTypeDefaultDescription
<LoginScreen> properties
openedbooleanfalseAllows to open/close Login Screen and set its initial state
animatebooleanWhether the modal should be opened/closed with animation or not
containerElHTMLElement
string
Element to mount modal to (default to app root element)

Login Screen Events

EventDescription
<LoginScreen> events
loginScreenOpenEvent will be triggered when Login Screen starts its opening animation
loginScreenOpenedEvent will be triggered after Login Screen completes its opening animation
loginScreenCloseEvent will be triggered when Login Screen starts its closing animation
loginScreenClosedEvent will be triggered after Login Screen completes its closing animation

Open And Close Login Screen

In addition to Login Screen open()/close() methods, you can open and close it:

Access To Login Screen Instance

You can access Login Screen initialized instance by calling .instance() component's method. For example:

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

<script>
  let component;

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


Examples

login-screen.svelte
<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>