-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
/
index.html
64 lines (61 loc) · 3.44 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<h1>Demos</h1>
<ul>
<li><a href="anijs.html">AniJS</a></li>
<li><a href="cell-height.html">Cell Height</a></li>
<li><a href="column.html">Column</a></li>
<!-- <li><a href="esmodule.html">ES Module test</a></li> -->
<li><a href="float.html">Float grid</a></li>
<li><a href="knockout.html">Knockout.js</a></li>
<li><a href="lazy_load.html">Lazy Load</a></li>
<li><a href="mobile.html">Mobile touch</a></li>
<li><a href="nested.html">Nested grids</a></li>
<li><a href="nested_advanced.html">Nested Advanced grids</a></li>
<li><a href="nested_constraint.html">Nested Constraint grids</a></li>
<li><a href="react-hooks-controlled-multiple.html">ReactJS (Hooks), multiple grid, controlled (NOT Ideal)</a></li>
<li><a href="react-hooks.html">ReactJS (Hooks)</a></li>
<li><a href="react.html">ReactJS</a></li>
<li><a href="responsive.html">Responsive: by column size</a></li>
<li><a href="responsive_break.html">Responsive: using breakpoints</a></li>
<li><a href="right-to-left(rtl).html">Right-To-Left (RTL)</a></li>
<li><a href="serialization.html">Serialization</a></li>
<li><a href="sizeToContent.html">Size To Content</a></li>
<li><a href="static.html">Static</a></li>
<li><a href="title_drag.html">Title drag</a></li>
<li><a href="transform.html">Transform (scale+offset)</a></li>
<li><a href="two.html">Two grids</a></li>
<li><a href="two_vertical.html">Two grids Vertical</a></li>
<li><a href="vue2js.html">Vue2.js</a></li>
<li><a href="vue3js.html">Vue3.js</a></li>
<li><a href="vue3js_dynamic-render_grid-item-content.html">Vue3: Gridstack Controls Vue Rendering Grid Item Content</a></li>
<li><a href="vue3js_dynamic-render_grid-item.html">Vue3: Gridstack Controls Vue Rendering Grid Item</a></li>
<li><a href="vue3js_v-for.html">Vue3 with v-for</a></li>
<li><a href="vue3js_dynamic-modern-renderCB.html">Vue3: Render GridStack item content using GridStack.renderCB</a></li>
<li><a href="web-comp.html">Web Component</a></li>
<li><a href="web1.html">Website demo 1</a></li>
<li><a href="web2.html">Website demo 2</a></li>
</ul>
<h1>Angular wrapper</h1>
<p>We now ship an <a href="https://github.com/gridstack/gridstack.js/tree/master/angular/" target="_blank">Angular Component</a>
to make it supper easy for that framework (Vue and React examples are above)</p>
<p>These are complete Angular projects with multiple options. use `yarn` and `yarn start` in <a href="https://github.com/gridstack/gridstack.js/tree/master/angular/projects/demo" target="_blank">angular demo</a> sub-project to run them</p>
<ol>
<li><a href="../angular/projects/demo/src/app/simple.ts">simple.ts</a></li>
<li><a href="../angular/projects/demo/src/app/ngFor.ts">ngFor.ts</a></li>
<li><a href="../angular/projects/demo/src/app/ngFor_cmd.ts">ngFor with command</a> (not recommended)</li>
<li><a href="../angular/projects/lib/src/lib/gridstack.component.ts">gridstack.component.ts</a> and <a href="../angular/projects/lib/src/lib/gridstack-item.component.ts">gridstack-item.component.ts</a> (BEST)</li>
</ol>
<h1>Old v5.1.1 Jquery Demos</h1>
Note: those are no longer supported, and use an old version of the lib to compare functionality.
<ul>
<li><a href="old_two-jq.html">Two grids</a></li>
<li><a href="old_nested-jq.html">Nested grids</a></li>
</ul>
</body>
</html>