Skip to content

Commit 7f5ee22

Browse files
jacob314jacob314
committed
v1
1 parent 277664e commit 7f5ee22

File tree

9 files changed

+183
-0
lines changed

9 files changed

+183
-0
lines changed

‎.gitignore

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
packages
2+
pubspec.lock
3+
.project
4+
.buildlog
5+
tags
6+
test/data/input/example
7+
test/data/output/
8+
test/perf/input/example
9+
test/perf/output/
10+
extension/output/
11+
out/
12+
tool/compile_mirrors.dart

‎build.dart

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import 'dart:io';
2+
import 'package:web_ui/component_build.dart';
3+
4+
// Ref: http://www.dartlang.org/articles/dart-web-components/tools.html
5+
main() {
6+
build(new Options().arguments, ['web/tabdemo.html']);
7+
}

‎pubspec.yaml

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
name: web_ui_tab_demo
2+
description: A simple Bootstrap compatible tab demo application
3+
dependencies:
4+
browser: any
5+
js: any
6+
web_ui: any

‎web/pane.dart

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
library pane;
2+
3+
import 'dart:html';
4+
import 'package:web_ui/web_ui.dart';
5+
6+
import 'tabs.dart';
7+
8+
class Pane extends WebComponent {
9+
bool selected = false;
10+
String paneTitle;
11+
12+
Tabs get _tabs {
13+
var p = parent;
14+
while(p != null) {
15+
if (p.xtag is Tabs) {
16+
return p.xtag;
17+
}
18+
p = p.parent;
19+
}
20+
return null;
21+
}
22+
23+
void created() {
24+
// TODO(jacobr): set classes with template once that is supported for
25+
// classes on the root node.
26+
classes.add("tab-pane");
27+
watchAndInvoke(() => selected, (_) {
28+
if (selected) {
29+
classes.add("active");
30+
} else {
31+
classes.remove("active");
32+
}
33+
});
34+
}
35+
void inserted() {
36+
_tabs.addPane(this);
37+
}
38+
39+
// TODO(jacobr): this shouldn't have been required for this simple example
40+
// but is required when watchers instead of observers are used with web-ui
41+
// as the Pane objects are created and destroyed every frame.
42+
void removed() {
43+
_tabs.removePane(this);
44+
}
45+
}

‎web/pane.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<body>
4+
<element name="x-pane" constructor="Pane" extends="div">
5+
<template>
6+
<content></content>
7+
</template>
8+
<script type="application/dart" src='pane.dart'></script>
9+
</element>
10+
</body>
11+
</html>

‎web/tabdemo.dart

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import 'dart:html';
2+
import 'package:web_ui/web_ui.dart';
3+
4+
class Item {
5+
String name;
6+
7+
Item(this.name);
8+
}
9+
10+
final items = <Item>[];
11+
12+
void add() {
13+
items.add(new Item('More Tea'));
14+
}
15+
16+
void main() {
17+
// Enable this to use Shadow DOM in the browser.
18+
//useShadowDom = true;
19+
items.addAll([new Item('Green Tea'), new Item('Fruit Tea')]);
20+
}

‎web/tabdemo.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
3+
<html>
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Tab Demo</title>
7+
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
8+
<link rel="components" href="tabs.html">
9+
<link rel="components" href="pane.html">
10+
</head>
11+
<body>
12+
<ul>
13+
<template iterate="item in items">
14+
<li>
15+
<input value="{{item.name}}"/>
16+
</li>
17+
</template>
18+
<li><button on-click="add()">+</button></li>
19+
</ul>
20+
<x-tabs>
21+
<template iterate="item in items">
22+
<x-pane pane-title="{{item.name}}">
23+
Description text for {{item.name}}
24+
</x-pane>
25+
</template>
26+
</x-tabs>
27+
28+
<script type="application/dart" src="tabdemo.dart"></script>
29+
</body>
30+
</html>

‎web/tabs.dart

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
library tabs;
2+
3+
import 'dart:html';
4+
import 'package:web_ui/web_ui.dart';
5+
6+
import 'pane.dart';
7+
8+
class Tabs extends WebComponent {
9+
10+
List<Pane> panes = [];
11+
12+
void select(Pane pane) {
13+
for (var p in panes) {
14+
p.selected = p == pane;
15+
}
16+
}
17+
18+
void removePane(Pane pane) {
19+
panes.remove(pane);
20+
}
21+
22+
void addPane(Pane pane) {
23+
panes.add(pane);
24+
if (panes.length == 1) select(pane);
25+
}
26+
}

‎web/tabs.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
</head>
5+
<body>
6+
<element name="x-tabs" constructor="Tabs" extends="div">
7+
<template>
8+
<div class="tabbable">
9+
<ul class="nav nav-tabs">
10+
<template iterate="pane in panes">
11+
<li class="{{pane.selected ? 'active' : ''}}">
12+
<a href="#" on-click="select(pane)">
13+
{{pane.paneTitle}}
14+
</a>
15+
</li>
16+
</template>
17+
</ul>
18+
<div class="tab-content">
19+
<content></content>
20+
</div>
21+
</div>
22+
</template>
23+
<script type="application/dart" src='tabs.dart'></script>
24+
</element>
25+
</body>
26+
</html>

0 commit comments

Comments
 (0)