https://github.com/vaadin-component-factory/vcf-onboarding
Vaadin Component Factory Onboarding
https://github.com/vaadin-component-factory/vcf-onboarding
onboarding polymer3 vaadin webcomponent
Last synced: 3 months ago
JSON representation
Vaadin Component Factory Onboarding
- Host: GitHub
- URL: https://github.com/vaadin-component-factory/vcf-onboarding
- Owner: vaadin-component-factory
- License: apache-2.0
- Created: 2019-07-17T08:34:36.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-11-24T13:34:35.000Z (over 4 years ago)
- Last Synced: 2024-09-20T09:15:29.868Z (8 months ago)
- Topics: onboarding, polymer3, vaadin, webcomponent
- Language: JavaScript
- Homepage: https://vcf-onboarding.netlify.com/
- Size: 32.2 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# <vcf-onboarding>
## Demo
https://vcf-onboarding.netlify.com/
## Installation
Install `vcf-onboarding`:
```sh
npm i @vaadin-component-factory/vcf-onboarding --save
```
## Usage
Once installed, import it in your application:
```js
import '@vaadin-component-factory/vcf-onboarding';
```
And use it:
```html
First Step
Second Step
Third 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.
### 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:
```html
[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 {
}
```
_Refer to [demos](https://vcf-onboarding.netlify.com/) 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
1. Fork the `vcf-onboarding` repository and clone it locally.
1. Make sure you have [npm](https://www.npmjs.com/) installed.
1. When in the `vcf-onboarding` directory, run `npm install` to install dependencies.
1. Run `npm start` to open the demo.
## Contributing
To contribute to the component, please read [the guideline](https://github.com/vaadin/vaadin-core/blob/master/CONTRIBUTING.md) first.
## License
Apache License 2.0