ngx onboarding is a customizable built-in library for Angular that can be used to direct your visitors through your web application. The setup library gives you the ability to add a tutorial directly to your angular app.
angular onboarding library, onboarding js, onboarding screens, javascript onboarding library, onboarding screen android github, onboarding screen angular native
Features
- Define multiple steps in each view.
- Highlight each step.
- Configurable in which position (top, bottom, left, or right) the info text should be displayed.
- Multi-language support
- If the setting is enabled, the buttons to go to the next step and to turn off the setting become visible.
- If the user sees an onboard view, it will be stored by default in the browser’s local storage.
- Possibility to reset and run setup again.
How to make use of it:
Installation:
# NPM $ npm install @rosen-group/ngx-onboarding --save
1. Add a rosen-onboarding component anywhere to your main component, for example, app. component.
<rosen-onboarding></rosen-onboarding>
2. Add material icons reference to index.html.
<link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
3. Add OnboardingModule and its dependencies to your module.
imports: [
BrowserModule,
BrowserAnimationsModule,
HttpClientModule,
MatIconModule,
MatButtonModule,
OnboardingModule
]4. Add some styles, for example to app.component.css()
@import "[email protected]/material/prebuilt-themes/indigo-pink.css";
Property descriptions
| Property | Type | Default value | Description |
|---|---|---|---|
| selector | string | null | The CSS selector, which identifies the html element you want to describe |
| group | string | null | Groups in the same view will be displayed together |
| position | top / bottom / right / left | bottom | Positioning of the headline and details |
| textAlign | left / right / center | center | Alignment of the headline and details |
| headline | string | null | Headline text for a single onboarding item |
| details | string | null | Details text for a single onboarding item |
| descriptions | Array | null | Collection of additional translations for headline and detail text |
| — language | string | null | Language key, e.g. en or de, related to your translation definition |
| — headline | string | null | Translated headline text for a single onboarding item |
| — details | string | null | Translated details text for a single onboarding item |
Create A Onboarding Screen On Your App, ngx-onboarding Plugin/Github, onboarding screen design
See Demo And Download
Official Website(rosen-group): Click Here
This superior jQuery/javascript plugin is developed by rosen-group. For extra Advanced Usages, please go to the official website.
