vcf-onboarding
Vaadin Component Factory Onboarding
<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/vcf-onboarding.js';
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, runnpm install
to install dependencies.Run
npm start
to open the demo.
Contributing
To contribute to the component, please read the guideline first.
License
Commercial Vaadin Add-on License version 3 (CVALv3). For license terms, see LICENSE.
Vaadin collects development time usage statistics to improve this product. For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
Dependencies
- @polymer/polymer#^3.0.0
- @vaadin/vaadin-button#2.2.0
- @vaadin/vaadin-dialog#^2.2.1
- @vaadin/vaadin-element-mixin#^2.1.3
- @vaadin/vaadin-lumo-styles#^1.5.0
- @vaadin/vaadin-themable-mixin#^1.4.4
- Released
- 2019-09-03
- Maturity
- IMPORTED
- License
- Other
Compatibility
- Framework
- Polymer 3.0+
- Browser
- Browser Independent
vcf-onboarding - Vaadin Add-on Directory
Vaadin Component Factory OnboardingFirst Step
Second Step
Third Step
View on GitHub
License
Online Demo
vcf-onboarding version 0.1.0
### Dependencies
* @polymer/polymer#^3.0.0
* @vaadin/vaadin-button#^2.2.1
* @vaadin/vaadin-dialog#^2.2.1
* @vaadin/vaadin-element-mixin#^2.1.3
* @vaadin/vaadin-lumo-styles#^1.5.0
* @vaadin/vaadin-themable-mixin#^1.4.4
vcf-onboarding version 0.2.0
### Dependencies
* @polymer/polymer#^3.0.0
* @vaadin/vaadin-button#^2.2.1
* @vaadin/vaadin-dialog#^2.2.1
* @vaadin/vaadin-element-mixin#^2.1.3
* @vaadin/vaadin-lumo-styles#^1.5.0
* @vaadin/vaadin-themable-mixin#^1.4.4
vcf-onboarding version 0.2.1
### Dependencies
* @polymer/polymer#^3.0.0
* @vaadin/vaadin-button#2.2.0
* @vaadin/vaadin-dialog#^2.2.1
* @vaadin/vaadin-element-mixin#^2.1.3
* @vaadin/vaadin-lumo-styles#^1.5.0
* @vaadin/vaadin-themable-mixin#^1.4.4
vcf-onboarding version 0.3.0
### Dependencies
* @polymer/polymer#^3.0.0
* @vaadin/vaadin-button#2.2.0
* @vaadin/vaadin-dialog#^2.2.1
* @vaadin/vaadin-element-mixin#^2.1.3
* @vaadin/vaadin-lumo-styles#^1.5.0
* @vaadin/vaadin-themable-mixin#^1.4.4
vcf-onboarding version 0.3.1
### Dependencies
* @polymer/polymer#^3.0.0
* @vaadin/vaadin-button#2.2.0
* @vaadin/vaadin-dialog#^2.2.1
* @vaadin/vaadin-element-mixin#^2.1.3
* @vaadin/vaadin-lumo-styles#^1.5.0
* @vaadin/vaadin-themable-mixin#^1.4.4
vcf-onboarding version 0.3.2
### Dependencies
* @polymer/polymer#^3.0.0
* @vaadin/vaadin-button#2.2.0
* @vaadin/vaadin-dialog#^2.2.1
* @vaadin/vaadin-element-mixin#^2.1.3
* @vaadin/vaadin-lumo-styles#^1.5.0
* @vaadin/vaadin-themable-mixin#^1.4.4
vcf-onboarding version 0.4.0
### Dependencies
* @polymer/polymer#^3.0.0
* @vaadin/vaadin-button#2.2.0
* @vaadin/vaadin-dialog#^2.2.1
* @vaadin/vaadin-element-mixin#^2.1.3
* @vaadin/vaadin-lumo-styles#^1.5.0
* @vaadin/vaadin-themable-mixin#^1.4.4
vcf-onboarding version 0.4.1
### Dependencies
* @polymer/polymer#^3.0.0
* @vaadin/vaadin-button#2.2.0
* @vaadin/vaadin-dialog#^2.2.1
* @vaadin/vaadin-element-mixin#^2.1.3
* @vaadin/vaadin-lumo-styles#^1.5.0
* @vaadin/vaadin-themable-mixin#^1.4.4
vcf-onboarding version 0.4.2
### Dependencies
* @polymer/polymer#^3.0.0
* @vaadin/vaadin-button#2.2.0
* @vaadin/vaadin-dialog#^2.2.1
* @vaadin/vaadin-element-mixin#^2.1.3
* @vaadin/vaadin-lumo-styles#^1.5.0
* @vaadin/vaadin-themable-mixin#^1.4.4
vcf-onboarding version 0.4.3
### Dependencies
* @polymer/polymer#^3.0.0
* @vaadin/vaadin-button#2.2.0
* @vaadin/vaadin-dialog#^2.2.1
* @vaadin/vaadin-element-mixin#^2.1.3
* @vaadin/vaadin-lumo-styles#^1.5.0
* @vaadin/vaadin-themable-mixin#^1.4.4
vcf-onboarding version 1.0.0
### Dependencies
* @polymer/polymer#^3.0.0
* @vaadin/vaadin-button#2.2.0
* @vaadin/vaadin-dialog#^2.2.1
* @vaadin/vaadin-element-mixin#^2.1.3
* @vaadin/vaadin-lumo-styles#^1.5.0
* @vaadin/vaadin-themable-mixin#^1.4.4