diff options
| author | Build Agent <build@vaadin.com> | 2015-08-21 13:18:23 +0300 |
|---|---|---|
| committer | Build Agent <build@vaadin.com> | 2015-09-07 13:04:47 +0300 |
| commit | f0adbe43d94ee379dde3e8851f3e9b4b6c3bbc26 (patch) | |
| tree | f751cf5d7abc754d5b7bc3e2d12397ebf7ba35d6 /README.md | |
| parent | 7451e585d2a8750594278e10f61f4cd66b77f0bb (diff) | |
| download | vaadin-core-f0adbe43d94ee379dde3e8851f3e9b4b6c3bbc26.tar.gz vaadin-core-f0adbe43d94ee379dde3e8851f3e9b4b6c3bbc26.zip | |
Release version 0.3.0-beta6.
Diffstat (limited to 'README.md')
| -rw-r--r-- | README.md | 64 |
1 files changed, 38 insertions, 26 deletions
@@ -4,18 +4,20 @@ Vaadin Components is an evolving set of custom HTML elements, built using [Polym For contributions and issues, see the project‘s [Github repository](https://github.com/vaadin/components). -### Examples & API Docs +### Component examples and documentation View live examples and source code side-by-side for individual custom elements. -- [<**v-grid**>](http://vaadin.github.io/components-examples/v-grid/) – Data grid for showing large amounts of tabular data ([API](http://vaadin.github.io/components-apidoc/#v-grid)) +| Component | Description | Features | +| --- | --- | --- | +| <**vaadin-grid**><li>[Examples](http://vaadin.github.io/components-examples/vaadin-grid/)<li>[API](http://vaadin.github.io/components-apidoc/#vaadin-grid) | Data grid for showing large amounts of tabular data. | Lazy-loading, virtual scrolling, frozen/fixed columns, customizable headers and footers, custom cell renderers, touch support, keyboard navigation, sorting ### Quickstart Get a quick test-drive of the custom elements by forking one of the following JSFiddles: -- <**v-grid**> +- <**vaadin-grid**> - [Data generated on-the-fly](http://jsfiddle.net/jounik/tvk1235r/) - [JSON data from a URL](http://jsfiddle.net/jounik/tLour4gv/) @@ -35,18 +37,28 @@ We offer three ways to use Vaadin Components in your project: Bower, CDN and ZIP - ##### Bower - We recommend using [Bower](http://bower.io) for managing your front-end dependencies. Follow the [Bower installation instructions](http://bower.io/#install-bower), then run the following command inside your project folder: + We recommend using [Bower](http://bower.io) for managing your front-end dependencies. Follow the [Bower installation instructions](http://bower.io/#install-bower), then run the following command inside your project folder to install the most recent stable release. ```shell - $ bower install --save vaadin-components#0.3.0-beta4 + $ bower install --save vaadin-components ``` - This will download Vaadin Components and its dependencies to the `bower_components` folder inside your project‘s folder. + This will download Vaadin Components and its dependencies to the `bower_components` folder inside your project's folder. + + If you want to experiment with current development code, download the snapshot version running: + + ```shell + $ bower install --save vaadin-components#master + ``` - ##### CDN You can use Vaadin Components from CDN (see example below). This is especially convenient for services like JSFiddle, Codepen.io, etc. + `https://cdn.vaadin.com/vaadin-components/0.3.0-beta7/vaadin-grid/vaadin-grid.html` + + _*Note*: that we have a fragment in the url with the version to use, so you could for instance replace it with the snapshot version_ + - ##### Download ZIP @@ -54,34 +66,34 @@ We offer three ways to use Vaadin Components in your project: Bower, CDN and ZIP 2. Extract the archive under your project folder, for example `deps` #### 3. Create a HTML file - + Create a new HTML file inside your project folder and copy the following code into it (choose one of the options how to import Vaadin Components in the `<head>` section): - + > **Note on serving the files during development**, when using Bower or the ZIP archive: - + > Due to browser security restrictions, serving HTML imports from a `file:///` URL does not work. You need a web server to view pages where you use custom elements. One simple option is to use the [`serve`](https://www.npmjs.com/package/serve) NPM package. - + ```html <!doctype html> <html> <head> <!-- Import Web Component polyfills and the components that you want --> - + <!-- CDN --> - <script src="https://cdn.vaadin.com/vaadin-components/0.3.0-beta4/webcomponentsjs/webcomponents-lite.js"></script> - <link href="https://cdn.vaadin.com/vaadin-components/0.3.0-beta4/vaadin-grid/vaadin-grid.html" rel="import"> - + <script src="https://cdn.vaadin.com/vaadin-components/0.3.0-beta7/webcomponentsjs/webcomponents-lite.js"></script> + <link href="https://cdn.vaadin.com/vaadin-components/0.3.0-beta7/vaadin-grid/vaadin-grid.html" rel="import"> + <!-- Bower --> <!-- <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script> <link href="bower_components/vaadin-components/vaadin-grid/vaadin-grid.html" rel="import"> --> - + <!-- ZIP archive --> <!-- <script src="deps/vaadin-components/webcomponentsjs/webcomponents-lite.js"></script> <link href="deps/vaadin-components/vaadin-grid/vaadin-grid.html" rel="import"> --> </head> <body> - - <v-grid selection-mode="multi"> + + <vaadin-grid selection-mode="multi"> <table> <!-- Define the columns --> <col name="index" header-text="#" width="48"> @@ -90,23 +102,23 @@ We offer three ways to use Vaadin Components in your project: Bower, CDN and ZIP <col name="user.name.last" header-text="Last Name"> <col name="user.email" header-text="Email" flex> </table> - </v-grid> + </vaadin-grid> <script> - // The Web Components polyfill introduces a custom event we can + // The Web Components polyfill introduces a custom event we can // use to determine when the custom elements are ready to be used document.addEventListener("WebComponentsReady", function () { - + // Reference to the grid element - var grid = document.querySelector("v-grid"); - + var grid = document.querySelector("vaadin-grid"); + // Fetch some JSON data from a URL var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState == XMLHttpRequest.DONE) { if (xhr.status == 200) { var json = JSON.parse(xhr.responseText); - + // Use the returned data array directly as the data source // (keeping all the data source items in the browser's memory) grid.data.source = json.results; @@ -115,19 +127,19 @@ We offer three ways to use Vaadin Components in your project: Bower, CDN and ZIP } xhr.open("GET", "http://api.randomuser.me/?results=100", true); xhr.send(); - + // Add a renderer for the index column grid.columns[0].renderer = function(cell) { cell.element.innerHTML = cell.row.index; } - + // Add a renderer for the picture column grid.columns[1].renderer = function(cell) { cell.element.innerHTML = '<img src="' + cell.data + '" style="width: 24px;">'; } }); </script> - + </body> </html> ``` |