blob: d7dabce76d3e064ab279e1627038f52dc918af20 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
|
# Vaadin Components
A set of high-quality Web Components built using Polymer.
Learn more about [Vaadin Components.](https://vaadin.com/labs-components/)
For contributions and issues, see the project's [Github Repository.](https://github.com/vaadin/components/)
## Installation
- Bower
```shell
$ bower install vaadin-components#0.3.0
```
```html
<!-- Import web component polyfills and the component you want into your HTML -->
<head>
...
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link href="bower_components/vaadin-components/vaadin-grid/vaadin-grid.html" rel="import">
...
</head>
```
- CDN
```html
<!-- Import web component polyfills and the component you want into your HTML -->
<head>
...
<script src="https://cdn.vaadin.com/vaadin-components/0.3.0/webcomponentsjs/webcomponents-lite.js"></script>
<link href="https://cdn.vaadin.com/vaadin-components/0.3.0/vaadin-grid/vaadin-grid.html" rel="import">
...
</head>
```
- Downloading the zip archive
- Head over to https://vaadin.com/download#components
- Download the version you wish to use
- Extract the zip under your project folder
```html
<!-- Import web component polyfills and the component you want into your HTML -->
<head>
...
<script src="deps/vaadin-components/webcomponentsjs/webcomponents-lite.js"></script>
<link href="deps/vaadin-components/vaadin-grid.html" rel="import">
...
</head>
```
## Usage
```html
<!-- After adding the required imports, just add a <v-grid> into your HTML -->
<v-grid>
<table>
<colgroup>
<col header-text="Name">
<col header-text="Value">
<col header-text="Progress">
</colgroup>
<tbody>
<tr>
<td>Grid</td>
<td>10000</td>
<td>0.8</td>
</tr>
<tr>
<td>Vaadin X</td>
<td>999999</td>
<td>0.8</td>
</tr>
</tbody>
</table>
</v-grid>
```
For more detailed examples on usage, see the [components-examples](https://tomivirkki.github.io/components-examples)
|
