Wondering what’s next for npm?Check out our public roadmap! »

    @vaadin-component-factory/vcf-onboarding

    1.0.2 • Public • Published

    <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

    1. Fork the vcf-onboarding repository and clone it locally.

    2. Make sure you have npm installed.

    3. When in the vcf-onboarding directory, run npm install to install dependencies.

    4. Run npm start to open the demo.

    Contributing

    To contribute to the component, please read the guideline first.

    License

    Apache License 2.0

    Install

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

    DownloadsWeekly Downloads

    1

    Version

    1.0.2

    License

    https://raw.githubusercontent.com/vaadin/vaadin-incubator-element/master/LICENSE

    Unpacked Size

    35.3 kB

    Total Files

    18

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar