@vaadin-component-factory/vcf-onboarding NPM

<vcf-onboarding>

Demo

https://vcf-onboarding.netlify.com/

Installation

Install vcf-onboarding:

npm i @vaadin-component-factory/vcf-onboarding --save

Usage

Once installed, import it in your application:

import '@vaadin-component-factory/vcf-onboarding';

And use it:

<vcf-onboarding>
  <div onboarding-step button-text="Next Step">
    <h1>First Step</h1>
  </div>
  <div onboarding-step button-text="Next Step">
    <h1>Second Step</h1>
  </div>
  <div onboarding-step button-text="Finish!">
    <h1>Third Step</h1>
  </div>
</vcf-onboarding>

Wrap the content of each step in an element with onboarding-step attribute and add the button text in button-text attribute of the element.

Styling

The following selectors are available for styling:

[part='steps-container']: The element that wraps all the steps.
[part='step']: The element that wraps the contents and the button of each step.
[part='step-content']: The element that wraps the contents of each step.
[part='onboarding-footer']: The element that wraps the buttons and steps indicators.
[part='step-button']: The button of each step.
[part='step-indicators']: The element that wraps step indicators.
[part='step-indicator']: The step indicator element.

How to provide styles of the content:

Create a dom-module element like the following example and add your styles:

<dom-module id="my-onboarding-styles" theme-for="vcf-onboarding">
  <template>
    <style>
      [part='steps-container'] {
      }
      [part='step'] {
      }
      [part='step'].active {
      }
      [part='step-content'] {
      }
      [part='onboarding-footer'] {
      }
      [part='step-button'] {
      }
      [part='step-button'].active {
      }
      [part='step-indicators'] {
      }
      [part='step-indicator'] {
      }
      [part='step-indicator'].active {
      }
    </style>
  </template>
</dom-module>

Refer to demos for a real-world example.

Note that after the user has gone through all the steps, the onboarding dialog will not show again in future visits.

Running demo

Fork the vcf-onboarding repository and clone it locally.
Make sure you have npm installed.
When in the vcf-onboarding directory, run npm install to install dependencies.
Run npm start to open the demo.