@xelberasw/ng-app-tutorial v0.1.0
Angular App Tutorial by XelberaSW
This library creates application interactive tutorial that could be used by you to show all functions of your app for new users. It should support any Angular version since 12.
Installation
Using npm:
npm i @xelberasw/ng-app-tutorial --saveUsing yarn:
yarn add @xelberasw/ng-app-tutorialPostinstall
This library supports standalone API (available since Angular 14) as well as standard modular API as well.
Standalone API (Supported by angular 14 and newer)
Inject service NgAppTutorialService into component you want help show request could be dispatched from. Nothing to be injected of set up before.
Standard Modular API (Backward compatability)
Import module NgAppTutorialModule into your AppModule. After this you will be able to use service NgAppTutorialService in any component you want help show request could be dispatched from. Nothing to be injected of set up before.
Usage
Data attributes
| Attribute | Type | Optional | Description |
|---|---|---|---|
| data--tutorial-id | string | NO | Unique identifier of item |
| data--tutorial-order | number | yes | Order to be used |
| data--tutorial-text | string | yes* | Text to be shown |
| data--tutorial-md | string | yes* | Markdown text to be shown |
| data--tutorial-md-src | string | yes* | Link to Markdown document to be shown |
| data--tutorial-clickable | any | yes | If this must be clickable in tutorial mode |
| data--tutorial-next-id | string | yes | Unique identifier of item to be shown next. Overrides data--tutorial-order |
*: One ofdata--tutorial-text,data--tutorial-mdordata--tutorial-md-srcmust be set
Showing tutorial UI
Inject NgAppTutorialService in any component and call show method. That's all )
All you need is having data attributes set up.
This module tracks mutations of data--tutorial-id so UI could be mutated even if tutorial UI is already shown.
Styling
You could modify visual by setting up custom CSS Variable
| Variable | Default value | Description |
|---|---|---|
| --ng-app-tutorial--backdrop-z-index | 2147483600 | z-index of backdrop. All other items will be places above it |
| --ng-app-tutorial--frame-color | #ffffff | Color of frames and arrow |
| --ng-app-tutorial--frame-width | 0.125rem | Width of frame for popup |
| --ng-app-tutorial--popup-border-radius | 0.5rem | Border radius to be use on popup and buttons inside |
| --ng-app-tutorial--popup-background | rgba(0 31 63 / 1) | Background of popup |
| --ng-app-tutorial--popup-color | var(--ng-app-tutorial--frame-color) | Color of text in popup |
| --ng-app-tutorial--popup-shadow | 0 1.4286rem 1.7857rem rgba(0, 0, 0, 0.25) | Shadow definition for popup |
| --ng-app-tutorial--btn-background | var(--ng-app-tutorial--popup-background) | Background of any button in popup |
| --ng-app-tutorial--btn-color | var(--ng-app-tutorial--popup-color) | Color of text on any button in popup |
| --ng-app-tutorial--gap | 0.625rem | Gap between items in popup. It is used for padding, spacing between buttons and so on |
| --ng-app-tutorial--backdrop-background | rgba(0 0 0 / 0.5) | Background of backdrop |
| --ng-app-tutorial--backdrop-blur | 1px | Size of blur to be applied for backdrop |
| --ng-app-tutorial--animation-duration | 0.3s | Length of animations used inside this module |
!NB! This module is prefers-reduced-motion-friendly, so --ng-app-tutorial--animation-duration will be set to 0s automatically if user do not want any animation to occur.
Support
please feel free to create PR-s with fixes and extending fulctionality.
1 year ago