Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sean-perkins/nativescript-onboarding
Example on-boarding application built with NativeScript Angular.
https://github.com/sean-perkins/nativescript-onboarding
nativescript nativescript-angular onboarding
Last synced: about 1 month ago
JSON representation
Example on-boarding application built with NativeScript Angular.
- Host: GitHub
- URL: https://github.com/sean-perkins/nativescript-onboarding
- Owner: sean-perkins
- License: mit
- Created: 2017-09-30T00:26:55.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-10-07T02:32:55.000Z (over 7 years ago)
- Last Synced: 2024-12-26T21:30:43.250Z (about 1 month ago)
- Topics: nativescript, nativescript-angular, onboarding
- Language: TypeScript
- Homepage:
- Size: 2.23 MB
- Stars: 17
- Watchers: 5
- Forks: 6
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# NativeScript Onboarding App
Instruct your users with a beautiful interface that quickly showcases how to use your application. On-board new users to your NativeScript application with ease.
---
**Current Version**: 1.0.0
**Release Date**: 09/30/2017
**Last Updated**: 09/30/2017
**Author**: Sean Perkins _()_, Devonite
---
### Features
- Supports iOS and Android
- Pre-built Animations (`slide_up`, `slide_down`, `slide_left`, `slide_right`, `stack_over`, `stack_under`)
- Configurable Properties for: background color, title, description, skip button text, continue button text and image url.
### Demo Images
|iOS|Android|
|:---:|:---:|
|
|
|
### Requirements
1. `nativescript-angular@~4.2.0`
2. `[email protected]`
3. Underscore named image paths (for Android)
## Integrating Into Your Application
You can easily integrate this module and functionality into your existing application by following these instructions:
1. Copy the fonts located in `app/fonts` into your project.
2. Copy the `onboarding` folder and contents into your project.
3. Import `OnboardingModule` into your project's feature module.
4. Copy over any asset images desired into your `App_Resources` directories for each platform.
### Recommended Component Usage
_example.component.html_
```html
```
_example.component.ts_
```js
slides = [
{
title: 'Example Title',
description: 'Example Description',
okButtonText: 'Continue',
skipButtonText: 'Skip',
backgroundColor: '#8A63B3',
imageUrl: 'res://slide_1',
animation: 'slide_left'
}
];
```
### Experimental Component Usage
This is not a recommended usage, but you may use the individual slide component directly. Animations are not expected to work with this method. You may try manage the `translateX` and `translateY` properties directly.
_example.component.html_
```html
```
## Animations
There are **6** supported animation types that can be passed as an option to the onboarding component.
1. `slide_up` - The slides will animate from the bottom towards the top.
2. `slide_down` - The slides will animate from the top towards the bottom.
3. `slide_left` - The slides will animate from the right towards the left.
4. `slide_right` - The slides will animate from the left towards the right.
5. `stack_over` - The current slide will animate down while the next slide will animate down over.
6. `stack_under` - The current slide will animate up while the next slide will animate under from the bottom.
**Note**: For `slide_left` and `slide_right` animations, the status bar background will animate cleanly across. If desired, you can disable the transparent status bar by passing `disableStatusBar` as false to the `ns-onboarding` component.
```html
```
### Event Hooks
1. `ns-onboarding`
This component has two hooks for `(onSkip)` and `(onFinish)`.
onSkip - When the user selects the skip option. The `$event` object contains the slide that was skipped.
onFinish - When the user has completed all slides or skipped the onboarding. The `$event` object contains the boolean value of if the onboarding was skipped.
## Example App
The example app includes the appropriate configuration to handle both `SASS` stylesheets as well as webpack builds.
To get started, install all needed NPM dependencies:
- `npm install`
You may leverage the stock NativeScript CLI commands to run the example app:
- `tns run ios`
- `tns run android`
To leverage the webpack build, you may run:
- `npm run start-ios-bundle`
- `npm run start-android-bundle`
Please refer to the respective repositories and/or the `package.json` for additional CLI commands.
### Contributors
[
](https://github.com/sean-perkins) |
:---:
|[Sean Perkins](https://github.com/sean-perkins)|
### Image Rights
- Icon images are a snapshot of animated sequences created by [Virgil Pana](https://dribbble.com/virgilpana).