Language: ENCN

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