Onboarding
IMPORT MODULE

The user guidance is to help users better understand and use the product.

Examples

onboarding.json
Basic Usage

Simplest of usage.

expand codeexpand code
import { Component } from '@angular/core';
import { OnboardingService } from '@delon/abc/onboarding';
import { _HttpClient } from '@delon/theme';
import { NzMessageService } from 'ng-zorro-antd/message';

@Component({
  selector: 'components-onboarding-basic',
  template: `
    <div class="mb-md pb-md border-bottom-1">
      <button class="test1-1" nz-button nzType="primary" (click)="handleClick()">First Button</button>
      <button class="test1-2" nz-button nzType="link">Second Button</button>
      <button class="test1-3" nz-button nzType="dashed">Third Button</button>
    </div>
    <button nz-button (click)="start()">Start</button>
    <button nz-button (click)="viaHttp()">Start Via Http</button>
    <a href="https://github.com/ng-alain/delon/blob/master/src/assets/schema/onboarding.json" target="_blank" class="ml-md">
      onboarding.json
    </a>
  `,
})
export class ComponentsOnboardingBasicComponent {
  constructor(private srv: OnboardingService, private msg: NzMessageService, private http: _HttpClient) {}

  handleClick(): void {
    this.msg.info(`click`);
  }

  start(): void {
    this.srv.start({
      items: [
        { selectors: '.test1-1', content: 'The user guidance is to help users better understand and use the product', width: 300 },
        { selectors: '.test1-2', title: 'Test2', content: 'The user guidance is to help users better understand and use the product' },
        { selectors: '.test1-3', title: 'Test3', content: 'The user guidance is to help users better understand and use the product' },
      ],
    });
  }

  viaHttp(): void {
    this.http.get(`./assets/schema/onboarding.json`).subscribe(res => {
      console.log(res);
      this.srv.start(res);
    });
  }
}
Multiple Pages

Use url to change the routing, it's recommended to use before to delay, otherwise the target element may not be obtained.

expand codeexpand code
import { Component } from '@angular/core';
import { OnboardingService } from '@delon/abc/onboarding';
import { _HttpClient } from '@delon/theme';

@Component({
  selector: 'components-onboarding-multiple-pages',
  template: `
    <div class="mb-md pb-md border-bottom-1">
      <button class="test2-1" nz-button nzType="primary">First Button</button>
      <button class="test2-3" nz-button nzType="dashed">Third Button</button>
    </div>
    <button nz-button (click)="start()">Start</button>
  `,
})
export class ComponentsOnboardingMultiplePagesComponent {
  constructor(private srv: OnboardingService) {}

  start(): void {
    this.srv.start({
      items: [
        {
          selectors: '.test2-1',
          content: 'The user guidance is to help users better understand and use the product',
          next: `Go to home`,
          width: 300,
          url: '/components/onboarding',
        },
        {
          selectors: '.page-banner__slogan',
          content:
            'ng-alain is an MIT-licensed open source project. In order to achieve better and sustainable development of the project, we expect to gain more backers. You can support us in any of the following ways, Or purchasing our <a href="https://e.ng-alain.com/" target="_blank">business theme</a>',
          width: 300,
          url: '/',
          before: 200,
        },
        {
          selectors: '.test2-3',
          title: 'Test3',
          content: 'The user guidance is to help users better understand and use the product',
          url: '/components/onboarding',
        },
      ],
    });
  }
}

API

OnboardingService

The components only support the use of OnboardingService service to build.

NameDescription
start(data: OnboardingData)Start a new user guidance
next()Next
prev()Prev
done()Done

OnboardingData

PropertyDescriptionTypeDefault
[items]Onboarding itemsOnboardingItem[][]
[mask]Whether to show mask or notbooleantrue
[maskClosable]Clicking on the mask (area outside the onboarding) to close the onboarding or notbooleantrue
[showTotal]Whether to show totalbooleanfalse

OnboardingItem

PropertyDescriptionTypeDefault
[selectors]The CSS selector, which identifies the html element you want to describestring-
[position]Positioning of the selector element, relative to the contents of the childrentop, left, right, bottom, topLeft, topRight, bottomLeft, bottomRight, leftTop, leftBottom, rightTop, rightBottombottomLeft
[className]Class name of the panelstring-
[width]Width of the panelnumber-
[title]Headline text of the panelstring, TemplateRef<void>-
[content]Detail text of the panelstring, SafeHtml, TemplateRef<void>-
[skip]Skip button of the panel, null Don't showstring, TemplateRef<void>, nullSkip
[prev]Prev button of the panel, null Don't showstring, TemplateRef<void>, nullPrev
[next]Next button of the panel, null Don't showstring, TemplateRef<void>, nullNext
[done]Done button of the panel, null Don't showstring, TemplateRef<void>, nullDone
[url]Target router urlstring-
[before]Callback before entering, triggered when call next operates, number indicate delayObservable<any>, number-
[after]Callback after entering, triggered when call prev operates, number indicate delayObservable<any>, number-