{"id":19655882,"url":"https://github.com/vaadin-component-factory/vcf-onboarding","last_synced_at":"2026-05-15T14:35:28.523Z","repository":{"id":57169091,"uuid":"197349261","full_name":"vaadin-component-factory/vcf-onboarding","owner":"vaadin-component-factory","description":"Vaadin Component Factory Onboarding","archived":false,"fork":false,"pushed_at":"2020-11-24T13:34:35.000Z","size":33,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-09-20T09:15:29.868Z","etag":null,"topics":["onboarding","polymer3","vaadin","webcomponent"],"latest_commit_sha":null,"homepage":"https://vcf-onboarding.netlify.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vaadin-component-factory.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-07-17T08:34:36.000Z","updated_at":"2020-11-24T13:34:38.000Z","dependencies_parsed_at":"2022-09-13T08:23:51.128Z","dependency_job_id":null,"html_url":"https://github.com/vaadin-component-factory/vcf-onboarding","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vaadin-component-factory%2Fvcf-onboarding","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vaadin-component-factory%2Fvcf-onboarding/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vaadin-component-factory%2Fvcf-onboarding/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vaadin-component-factory%2Fvcf-onboarding/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vaadin-component-factory","download_url":"https://codeload.github.com/vaadin-component-factory/vcf-onboarding/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240964353,"owners_count":19885733,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["onboarding","polymer3","vaadin","webcomponent"],"created_at":"2024-11-11T15:24:28.783Z","updated_at":"2026-05-15T14:35:23.496Z","avatar_url":"https://github.com/vaadin-component-factory.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# \u0026lt;vcf-onboarding\u0026gt;\n\n## Demo\n\nhttps://vcf-onboarding.netlify.com/\n\n## Installation\n\nInstall `vcf-onboarding`:\n\n```sh\nnpm i @vaadin-component-factory/vcf-onboarding --save\n```\n\n## Usage\n\nOnce installed, import it in your application:\n\n```js\nimport '@vaadin-component-factory/vcf-onboarding';\n```\n\nAnd use it:\n\n```html\n\u003cvcf-onboarding\u003e\n  \u003cdiv onboarding-step button-text=\"Next Step\"\u003e\n    \u003ch1\u003eFirst Step\u003c/h1\u003e\n  \u003c/div\u003e\n  \u003cdiv onboarding-step button-text=\"Next Step\"\u003e\n    \u003ch1\u003eSecond Step\u003c/h1\u003e\n  \u003c/div\u003e\n  \u003cdiv onboarding-step button-text=\"Finish!\"\u003e\n    \u003ch1\u003eThird Step\u003c/h1\u003e\n  \u003c/div\u003e\n\u003c/vcf-onboarding\u003e\n```\n\nWrap the content of each step in an element with `onboarding-step` attribute and add the button text in `button-text` attribute of the element.\n\n### Styling\n\nThe following selectors are available for styling:\n\n- `[part='steps-container']`: The element that wraps all the steps.\n- `[part='step']`: The element that wraps the contents and the button of each step.\n- `[part='step-content']`: The element that wraps the contents of each step.\n- `[part='onboarding-footer']`: The element that wraps the buttons and steps indicators.\n- `[part='step-button']`: The button of each step.\n- `[part='step-indicators']`: The element that wraps step indicators.\n- `[part='step-indicator']`: The step indicator element.\n\n### How to provide styles of the content:\n\nCreate a `dom-module` element like the following example and add your styles:\n\n```html\n\u003cdom-module id=\"my-onboarding-styles\" theme-for=\"vcf-onboarding\"\u003e\n  \u003ctemplate\u003e\n    \u003cstyle\u003e\n      [part='steps-container'] {\n      }\n      [part='step'] {\n      }\n      [part='step'].active {\n      }\n      [part='step-content'] {\n      }\n      [part='onboarding-footer'] {\n      }\n      [part='step-button'] {\n      }\n      [part='step-button'].active {\n      }\n      [part='step-indicators'] {\n      }\n      [part='step-indicator'] {\n      }\n      [part='step-indicator'].active {\n      }\n    \u003c/style\u003e\n  \u003c/template\u003e\n\u003c/dom-module\u003e\n```\n\n_Refer to [demos](https://vcf-onboarding.netlify.com/) for a real-world example._\n\n**Note that after the user has gone through all the steps, the onboarding dialog will not show again in future visits.**\n\n## Running demo\n\n1. Fork the `vcf-onboarding` repository and clone it locally.\n\n1. Make sure you have [npm](https://www.npmjs.com/) installed.\n\n1. When in the `vcf-onboarding` directory, run `npm install` to install dependencies.\n\n1. Run `npm start` to open the demo.\n\n## Contributing\n\nTo contribute to the component, please read [the guideline](https://github.com/vaadin/vaadin-core/blob/master/CONTRIBUTING.md) first.\n\n## License\n\nApache License 2.0","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvaadin-component-factory%2Fvcf-onboarding","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvaadin-component-factory%2Fvcf-onboarding","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvaadin-component-factory%2Fvcf-onboarding/lists"}