-
Notifications
You must be signed in to change notification settings - Fork 86
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore: add usage instructions to README (#75)
- Loading branch information
1 parent
3e4764c
commit 56389b3
Showing
2 changed files
with
160 additions
and
9 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,39 +1,189 @@ | ||
| # Vaadin web components | ||
| <p align="center"> | ||
| <a href="https://vaadin.com" rel="noopener" target="_blank"><img width="100" src="https://raw.githubusercontent.com/vaadin/vaadin-web-components/master/vaadin-logo.svg" alt="Vaadin logo"></a></p> | ||
| </p> | ||
|
|
||
| This is a monorepo powered by [Lerna](https://github.com/lerna/lerna) that includes all Vaadin web components. | ||
| <h1 align="center">Vaadin web components</h1> | ||
|
|
||
| ## Setup | ||
| <div align="center"> | ||
|
|
||
| [Vaadin components](https://vaadin.com/components) is an evolving set of high-quality web components for business web applications. | ||
|
|
||
| [](https://github.com/vaadin/vaadin-web-components/actions/workflows/chrome.yml) | ||
| [](https://github.com/vaadin/vaadin-web-components/actions/workflows/firefox.yml) | ||
| [](https://github.com/vaadin/vaadin-web-components/actions/workflows/webkit.yml) | ||
| [](https://twitter.com/vaadin) | ||
| [](https://vaad.in/chat) | ||
| </div> | ||
|
|
||
| ## Installation | ||
|
|
||
| Install the components that you need from npm: | ||
|
|
||
| ```sh | ||
| npm install @vaadin/vaadin-grid | ||
| ``` | ||
|
|
||
| ## Usage | ||
|
|
||
| [Live demo →](https://webcomponents.dev/edit/JZcKP3kkHcJIgiCaI818/www/index.html) | ||
|
|
||
| Import the component's JavaScript module, use the component in your HTML, and control it with JavaScript: | ||
|
|
||
| ```html | ||
| <!doctype html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>Vaadin example</title> | ||
| </head> | ||
| <body> | ||
| <!-- Use web components in your HTML like regular built-in elements. --> | ||
| <vaadin-grid theme="row-dividers" column-reordering-allowed multi-sort> | ||
| <vaadin-grid-selection-column auto-select frozen></vaadin-grid-selection-column> | ||
| <vaadin-grid-sort-column width="9em" path="firstName"></vaadin-grid-sort-column> | ||
| <vaadin-grid-sort-column width="9em" path="lastName"></vaadin-grid-sort-column> | ||
| <vaadin-grid-column width="9em" path="address.city"></vaadin-grid-column> | ||
| </vaadin-grid> | ||
|
|
||
| <!-- Vaadin web components use standard JavaScript modules. --> | ||
| <script type="module"> | ||
| // Importing the following modules registers <vaadin-grid> and its column | ||
| // elements so that you can use them in this page. | ||
| import '@vaadin/vaadin-grid/vaadin-grid.js'; | ||
| import '@vaadin/vaadin-grid/vaadin-grid-selection-column.js'; | ||
| import '@vaadin/vaadin-grid/vaadin-grid-sort-column.js'; | ||
| // Use component's properties to populate data. | ||
| const grid = document.querySelector('vaadin-grid'); | ||
| fetch('https://demo.vaadin.com/demo-data/1.0/people?count=200') | ||
| .then(res => res.json()) | ||
| .then(json => grid.items = json.result); | ||
| </script> | ||
| </body> | ||
| </html> | ||
| ``` | ||
|
|
||
| Serve your HTML with a development server that supports bare module specifiers, such as [`@web/dev-server`](https://modern-web.dev/docs/dev-server/overview/): | ||
|
|
||
| ```sh | ||
| npm i -g @web/dev-server | ||
| web-dev-server --node-resolve --open | ||
| ``` | ||
|
|
||
| ## Components | ||
|
|
||
| This project contains components for Vaadin 20+. Please see individual repositories for older Vaadin versions. | ||
|
|
||
| ### Core Components | ||
|
|
||
| The components below are licensed under the Apache License 2.0. | ||
|
|
||
| | Component | npm version | Issues | | ||
| |-----------|--------------|--------------------| | ||
| | [`<vaadin-accordion>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-accordion) | [](https://www.npmjs.com/package/@vaadin/vaadin-accordion) | [Issues](https://github.com/vaadin/vaadin-accordion/issues) | ||
| | [`<vaadin-app-layout>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-app-layout) | [](https://www.npmjs.com/package/@vaadin/vaadin-app-layout) | [Issues](https://github.com/vaadin/vaadin-app-layout/issues) | ||
| | [`<vaadin-avatar>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-avatar) | [](https://www.npmjs.com/package/@vaadin/vaadin-avatar) | [Issues](https://github.com/vaadin/vaadin-avatar/issues) | ||
| | [`<vaadin-button>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-button) | [](https://www.npmjs.com/package/@vaadin/vaadin-button) | [Issues](https://github.com/vaadin/vaadin-button/issues) | ||
| | [`<vaadin-checkbox>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-checkbox) | [](https://www.npmjs.com/package/@vaadin/vaadin-checkbox) | [Issues](https://github.com/vaadin/vaadin-checkbox/issues) | ||
| | [`<vaadin-combo-box>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-combo-box) | [](https://www.npmjs.com/package/@vaadin/vaadin-combo-box) | [Issues](https://github.com/vaadin/vaadin-combo-box/issues) | ||
| | [`<vaadin-context-menu>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-context-menu) | [](https://www.npmjs.com/package/@vaadin/vaadin-context-menu) | [Issues](https://github.com/vaadin/vaadin-context-menu/issues) | ||
| | [`<vaadin-custom-field>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-custom-field) | [](https://www.npmjs.com/package/@vaadin/vaadin-custom-field) | [Issues](https://github.com/vaadin/vaadin-custom-field/issues) | ||
| | [`<vaadin-date-picker>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-date-picker) | [](https://www.npmjs.com/package/@vaadin/vaadin-date-picker) | [Issues](https://github.com/vaadin/vaadin-date-picker/issues) | ||
| | [`<vaadin-date-time-picker>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-date-time-picker) | [](https://www.npmjs.com/package/@vaadin/vaadin-date-time-picker) | [Issues](https://github.com/vaadin/vaadin-date-time-picker/issues) | ||
| | [`<vaadin-details>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-details) | [](https://www.npmjs.com/package/@vaadin/vaadin-details) | [Issues](https://github.com/vaadin/vaadin-details/issues) | ||
| | [`<vaadin-dialog>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-dialog) | [](https://www.npmjs.com/package/@vaadin/vaadin-dialog) | [Issues](https://github.com/vaadin/vaadin-dialog/issues) | ||
| | [`<vaadin-form-layout>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-form-layout) | [](https://www.npmjs.com/package/@vaadin/vaadin-form-layout) | [Issues](https://github.com/vaadin/vaadin-form-layout/issues) | ||
| | [`<vaadin-grid>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-grid) | [](https://www.npmjs.com/package/@vaadin/vaadin-grid) | [Issues](https://github.com/vaadin/vaadin-grid/issues) | ||
| | [`<vaadin-icons>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-icons) | [](https://www.npmjs.com/package/@vaadin/vaadin-icons) | [Issues](https://github.com/vaadin/vaadin-icons/issues) | ||
| | [`<vaadin-item>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-item) | [](https://www.npmjs.com/package/@vaadin/vaadin-item) | [Issues](https://github.com/vaadin/vaadin-item/issues) | ||
| | [`<vaadin-list-box>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-list-box) | [](https://www.npmjs.com/package/@vaadin/vaadin-list-box) | [Issues](https://github.com/vaadin/vaadin-list-box/issues) | ||
| | [`<vaadin-login>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-login) | [](https://www.npmjs.com/package/@vaadin/vaadin-login) | [Issues](https://github.com/vaadin/vaadin-login/issues) | ||
| | [`<vaadin-menu-bar>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-menu-bar) | [](https://www.npmjs.com/package/@vaadin/vaadin-menu-bar) | [Issues](https://github.com/vaadin/vaadin-menu-bar/issues) | ||
| | [`<vaadin-messages>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-messages) | [](https://www.npmjs.com/package/@vaadin/vaadin-messages) | [Issues](https://github.com/vaadin/vaadin-messages/issues) | ||
| | [`<vaadin-notification>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-notification) | [](https://www.npmjs.com/package/@vaadin/vaadin-notification) | [Issues](https://github.com/vaadin/vaadin-notification/issues) | ||
| | [`<vaadin-ordered-layout>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-ordered-layout) | [](https://www.npmjs.com/package/@vaadin/vaadin-ordered-layout) | [Issues](https://github.com/vaadin/vaadin-ordered-layout/issues) | ||
| | [`<vaadin-progress-bar>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-progress-bar) | [](https://www.npmjs.com/package/@vaadin/vaadin-progress-bar) | [Issues](https://github.com/vaadin/vaadin-progress-bar/issues) | ||
| | [`<vaadin-radio-button>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-radio-button) | [](https://www.npmjs.com/package/@vaadin/vaadin-radio-button) | [Issues](https://github.com/vaadin/vaadin-radio-button/issues) | ||
| | [`<vaadin-select>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-select) | [](https://www.npmjs.com/package/@vaadin/vaadin-select) | [Issues](https://github.com/vaadin/vaadin-select/issues) | ||
| | [`<vaadin-split-layout>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-split-layout) | [](https://www.npmjs.com/package/@vaadin/vaadin-split-layout) | [Issues](https://github.com/vaadin/vaadin-split-layout/issues) | ||
| | [`<vaadin-tabs>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-tabs) | [](https://www.npmjs.com/package/@vaadin/vaadin-tabs) | [Issues](https://github.com/vaadin/vaadin-tabs/issues) | ||
| | [`<vaadin-text-field>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-text-field) | [](https://www.npmjs.com/package/@vaadin/vaadin-text-field) | [Issues](https://github.com/vaadin/vaadin-text-field/issues) | ||
| | [`<vaadin-time-picker>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-time-picker) | [](https://www.npmjs.com/package/@vaadin/vaadin-time-picker) | [Issues](https://github.com/vaadin/vaadin-time-picker/issues) | ||
| | [`<vaadin-upload>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-upload) | [](https://www.npmjs.com/package/@vaadin/vaadin-upload) | [Issues](https://github.com/vaadin/vaadin-upload/issues) | ||
|
|
||
| ### Pro Components | ||
|
|
||
| The components below are licensed under [CVDL 4.0 license](https://vaadin.com/license/cvdl-4.0) and available as part of the [Vaadin Pro Subscription](https://vaadin.com/pricing). | ||
|
|
||
| | Component | npm version | Issues | | ||
| |-----------|--------------|--------------------| | ||
| | [`<vaadin-board>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-board) | [](https://www.npmjs.com/package/@vaadin/vaadin-board) | [Issues](https://github.com/vaadin/vaadin-board/issues) | ||
| | [`<vaadin-charts>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-charts) | [](https://www.npmjs.com/package/@vaadin/vaadin-charts) | [Issues](https://github.com/vaadin/vaadin-charts/issues) | ||
| | [`<vaadin-confirm-dialog>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-confirm-dialog) | [](https://www.npmjs.com/package/@vaadin/vaadin-confirm-dialog) | [Issues](https://github.com/vaadin/vaadin-confirm-dialog/issues) | ||
| | [`<vaadin-cookie-consent>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-cookie-consent) | [](https://www.npmjs.com/package/@vaadin/vaadin-cookie-consent) | [Issues](https://github.com/vaadin/vaadin-cookie-consent/issues) | ||
| | [`<vaadin-crud>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-crud) | [](https://www.npmjs.com/package/@vaadin/vaadin-crud) | [Issues](https://github.com/vaadin/vaadin-crud/issues) | ||
| | [`<vaadin-grid-pro>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-grid-pro) | [](https://www.npmjs.com/package/@vaadin/vaadin-grid-pro) | [Issues](https://github.com/vaadin/vaadin-grid-pro/issues) | ||
| | [`<vaadin-rich-text-editor>`](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-rich-text-editor) | [](https://www.npmjs.com/package/@vaadin/vaadin-rich-text-editor) | [Issues](https://github.com/vaadin/vaadin-rich-text-editor/issues) | ||
|
|
||
| ## Browser support | ||
|
|
||
| Vaadin components use [Custom Elements](https://caniuse.com/#feat=custom-elementsv1) and [Shadow DOM](https://caniuse.com/#feat=shadowdomv1) | ||
| that are natively supported by modern browsers. | ||
|
|
||
| ## Documentation | ||
|
|
||
| Check out our [design system documentation](https://vaadin.com/docs-beta/latest/ds/overview/). | ||
|
|
||
| ## Examples | ||
|
|
||
| Are you looking for an example project to get started? Visit [start.vaadin.com](https://start.vaadin.com/?preset=fusion) to create a Vaadin app. | ||
|
|
||
| ## Questions | ||
|
|
||
| For help and support questions, please use our [community chat](https://vaad.in/chat). | ||
|
|
||
| ## Contributing | ||
|
|
||
| Read the [contributing guide](https://vaadin.com/docs-beta/latest/guide/contributing/overview/) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components. | ||
|
|
||
| ## Development | ||
|
|
||
| Setup the repo: | ||
|
|
||
| ```sh | ||
| yarn | ||
| ``` | ||
|
|
||
| ## Run all tests in Chrome | ||
| Run all tests in Chrome: | ||
|
|
||
| ```sh | ||
| yarn test | ||
| ``` | ||
|
|
||
| Note: this and following scripts only run tests for packages changed since `origin/master` branch. | ||
|
|
||
| ## Run all tests in Firefox | ||
| Run all tests in Firefox: | ||
|
|
||
| ```sh | ||
| yarn test:firefox | ||
| ``` | ||
|
|
||
| ## Run all tests in WebKit | ||
| Run all tests in WebKit: | ||
|
|
||
| ```sh | ||
| yarn test:webkit | ||
| ``` | ||
|
|
||
| ## Run tests for single package | ||
| Run tests for single package: | ||
|
|
||
| ```sh | ||
| yarn test --group vaadin-upload | ||
| ``` | ||
|
|
||
| Debug tests for single package: | ||
|
|
||
| ```sh | ||
| yarn debug --group vaadin-upload | ||
| ``` | ||
|
|
||
| ## LICENSE | ||
|
|
||
| For specific package(s), check the LICENSE file under the package folder. |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.