-
Get Started
-
React Components
- Accordion
- Badge
- Block Title
- Block / Content Block
- Button
- Card
- Chips / Tags
- Floating Action Button
-
Forms
- Icon
- Grid / Layout Grid
-
Lists
- Link
- Messages
- Message Bar
-
Modals
-
Navigation Bars
- Pages
- Page
- Panel
- Photo Browser
- Preloader / Spinner
- Progress Bar
- Search Bar
- Status Bar
- Swiper
- Tabs
- Template7 Template
- Timeline
- Views
- View
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) andcloseLoginScreen
property to close it