diff options
Diffstat (limited to 'README.md')
| -rw-r--r-- | README.md | 38 |
1 files changed, 22 insertions, 16 deletions
@@ -4,22 +4,14 @@ Vaadin Core Elements is an evolving set of custom HTML elements, built using [Polymer](https://www.polymer-project.org), for building mobile and desktop web applications in modern browsers. -### Component examples and documentation +### Examples and Documentation View live examples and source code side-by-side for individual custom elements. -======= | Element | Description | Status | --- | --- | --- | | [<**vaadin-grid**>](https://github.com/vaadin/vaadin-grid) · [Examples](https://cdn.vaadin.com/vaadin-core-elements/latest/vaadin-grid/demo/) · [API](https://cdn.vaadin.com/vaadin-core-elements/latest/vaadin-grid/) | Data grid for showing large amounts of tabular data. | Beta | - -### Quickstart - - Get a quick test-drive of the custom elements by forking one of the following JSFiddles: - -- <**vaadin-grid**> - - [Data generated on-the-fly](http://jsfiddle.net/jounik/tvk1235r/) - - [JSON data from a URL](http://jsfiddle.net/jounik/tLour4gv/) +| [<**vaadin-combo-box**>](https://github.com/vaadin/vaadin-combo-box) · [Examples](https://cdn.vaadin.com/vaadin-core-elements/master/vaadin-combo-box/demo/) · [API](https://cdn.vaadin.com/vaadin-core-elements/master/vaadin-combo-box/) | Filterable select element for a large set of items. | Alpha | ### Installation @@ -43,9 +35,9 @@ We offer three ways to use Vaadin Core Elements in your project: Bower, CDN and ``` This will download Vaadin Core Elements bundle and its dependencies to the `bower_components` folder inside your project's folder. - + If you wish to use the development snapshot version of some component, you can install/update that separately: - + ```shell $ bower install --save vaadin-grid#master ``` @@ -98,15 +90,27 @@ We offer three ways to use Vaadin Core Elements in your project: Bower, CDN and </head> <body> + <!-- Use the elements, for instance vaadin-grid --> <vaadin-grid selection-mode="multi"> <table> <!-- Define the columns --> - <col name="index" header-text="#" width="48"> + <col name="index" width="48"> <col name="user.picture.thumbnail" width="54"> - <col name="user.name.first" header-text="First Name"> - <col name="user.name.last" header-text="Last Name"> - <col name="user.email" header-text="Email" flex> + <col name="user.name.first"> + <col name="user.name.last"> + <col name="user.email" flex> </table> + + <!-- Define custom column headers --> + <thead> + <tr> + <th>#</th> + <th></th> + <th>First Name</th> + <th>Last Name</th> + <th>Email</th> + </tr> + </thead> </vaadin-grid> <script> @@ -114,6 +118,8 @@ We offer three ways to use Vaadin Core Elements in your project: Bower, CDN and // use to determine when the custom elements are ready to be used document.addEventListener("WebComponentsReady", function () { + // Configure vaadin-grid to show data + // Reference to the grid element var grid = document.querySelector("vaadin-grid"); |