|
8 years ago | |
---|---|---|
apidoc | 8 years ago | |
demo | 8 years ago | |
doc | 8 years ago | |
tasks | 8 years ago | |
.gitignore | 8 years ago | |
CHANGES.md | 8 years ago | |
LICENSE.html | 8 years ago | |
README.md | 8 years ago | |
bower.json | 8 years ago | |
gulpfile.js | 8 years ago | |
package.json | 8 years ago | |
vaadin-elements.html | 8 years ago |
Vaadin Elements is an evolving set of custom HTML elements, built using Polymer, for building mobile and desktop web applications in modern browsers.
View live examples and source code side-by-side for individual custom elements.
Component | Description |
---|---|
<vaadin-grid> · Examples · API | Data grid for showing large amounts of tabular data. |
Get a quick test-drive of the custom elements by forking one of the following JSFiddles:
We offer three ways to use Vaadin Elements in your project: Bower, CDN and ZIP archive. The only difference between the options is the URL you use to import the necessary files into your HTML page.
$ mkdir my-project
$ cd my-project
We recommend using Bower for managing your front-end dependencies. Follow the Bower installation instructions, then run the following command inside your project folder to install the most recent stable release.
$ bower install --save vaadin-elements
This will download Vaadin Elements 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:
$ bower install --save vaadin-grid#master
You can use Vaadin Elements from CDN (see example below). This is especially convenient for services like JSFiddle, Codepen.io, etc.
For example, to import vaadin-grid, use the following URL:
https://cdn.vaadin.com/vaadin-elements/latest/vaadin-grid/vaadin-grid.html
To import all Vaadin Elements, use the following URL:
https://cdn.vaadin.com/vaadin-elements/latest/vaadin-elements/vaadin-elements.html
You can also use the nightly snapshot versions of any component, e.g. https://cdn.vaadin.com/vaadin-elements/master/vaadin-grid/vaadin-grid.html
deps
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 Elements in the <head>
section):
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 theserve
NPM package.
<!doctype html>
<html>
<head>
<!-- Import Web Component polyfills and all Vaadin Elements -->
<!-- CDN -->
<script src="https://cdn.vaadin.com/vaadin-elements/latest/webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="https://cdn.vaadin.com/vaadin-elements/latest/vaadin-elements/vaadin-elements.html" rel="import">
<!-- Bower -->
<!-- <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="bower_components/vaadin-elements/vaadin-elements.html" rel="import"> -->
<!-- ZIP archive -->
<!-- <script src="deps/webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="deps/vaadin-elements/vaadin-elements.html" rel="import"> -->
</head>
<body>
<vaadin-grid selection-mode="multi">
<table>
<!-- Define the columns -->
<col name="index" header-text="#" 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>
</table>
</vaadin-grid>
<script>
// 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("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.items = json.results;
}
}
}
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>