npm i @vaadin-component-factory/vcf-onboarding --save
Once installed, import it in your application:
And use it:
First StepSecond StepThird Step
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.
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:
dom-module element like the following example and add your styles:
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.
vcf-onboardingrepository and clone it locally.
Make sure you have npm installed.
When in the
npm installto install dependencies.
npm startto open the demo.
To contribute to the component, please read the guideline first.
Apache License 2.0