Login Screen React Component

Picker Modal is a special overlay type which is similar to Picker/Calendar's overlay. Such modal allows to create custom picker overlays with custom content.

Login Screen React component represents Login Screen component.

Usage example

<!-- Login Screen -->
<LoginScreen>
  <!-- Login Screen content goes here -->
</LoginScreen>

Renders to:

<!-- Login Screen -->
<div class="login-screen">
  <!-- Login Screen content goes here -->
</div>

Full Login Screen Layout

According to Login Screen Layout here is the recommended Login Screen layout structure:

<LoginScreen>
  <View>
    <Pages>
      <Page loginScreen>
        <LoginScreenTitle>My App</LoginScreenTitle>
        <List form>
          <ListItem>
            <FormLabel>Username</FormLabel>
            <FormInput name="username" placeholder="Username"></FormInput>
          </ListItem>
          <ListItem>
            <FormLabel>Password</FormLabel>
            <FormInput name="password" type="password" placeholder="Password"></FormInput>
          </ListItem>
        </List>
        <List>
          <ListButton title="Sign In" closeLoginScreen></ListButton>
          <ListLabel>
            <p>Click Sign In to close Login Screen</p>
          </ListLabel>
        </List>
      </Page>
    </Pages>
  </View>
</LoginScreen>

Where:

• <LoginScreenTitle>My App</LoginScreenTitle> - additional component with Login Screen title
• <Page loginScreen> - additional boolean login-screen property on page component to add extra styling to page form elements

Properties

Prop	Type	Description
theme	string	Login Screen theme color. One of default colors
layout	string	Login Screen layout theme. One of default layout themes
opened	boolean	Allows to open/close Login Screen and set its initial state

Event Properties

Event	Description
onLoginscreenOpen	Event will be triggered when Login Screen starts its opening animation
onLoginscreenOpened	Event will be triggered after Login Screen completes its opening animation
onLoginscreenClose	Event will be triggered when Login Screen starts its closing animation
onLoginscreenClosed	Event will be triggered after Login Screen completes its closing animation

Open and close Login Screen

You can control Login Screen state, open and closing it:

• using its JavaScript API
• by passing true or false to its opened prop
• by clicking on Link or Button with relevant openLoginScreen property (to open it) and closeLoginScreen property to close it