##// END OF EJS Templates
implab » implabjs-djx
RSS
Added test widgets to the playground
cin -
r100:ff52224a63f0 v1.3
parent child
Show More
Show file before | Show file after | Hide comments
@@ -0,0 +1,39
1 .progress-bar * {
2 transition: all 0.5s;
3 }
4
5 .progress-bar {
6
7 transition: all 0.5s;
8 height: 1em;
9 line-height: 0;
10 font-size: 10px;
11 white-space: nowrap;
12 }
13
14 .progress-track {
15 background-color: #888;
16 height: 0.2em;
17 box-shadow: 0 0 0.5em 0 #0004;
18 width: 70%;
19 display: inline-block;
20 vertical-align: middle;
21 }
22
23 .progress-indicator {
24 width: 30%;
25 background-color: #0ae;
26 height: 100%;
27 display: inline-block;
28 vertical-align: middle;
29 box-shadow: 0 0.6em 1em -0.4em #000;
30 }
31
32 .progress-bar:hover .progress-indicator {
33 box-shadow: 0 1em 2em -0.4em #000;
34 }
35
36 .progress-bar:hover .progress-track {
37 background-color: #0ae;
38 box-shadow: 0 0 0.5em 0 #0ae;
39 } No newline at end of file
Show file before | Show file after | Hide comments
@@ -0,0 +1,19
1 import { djbase, djclass } from "@implab/djx/declare";
2 import { createElement } from "@implab/djx/tsx";
3 import { DjxWidgetBase } from "@implab/djx/tsx/DjxWidgetBase";
4 import "@implab/djx/css!./css/ProgressBar.css";
5
6 @djclass
7 export default class ProgressBar extends djbase(DjxWidgetBase) {
8
9 constructor(opts?: Partial<ProgressBar> & ThisType<ProgressBar>, refNode?: Node | string) {
10 super(opts, refNode);
11 }
12 render() {
13 return <div class="progress-bar">
14 <div class="progress-indicator"/>
15 <div class="progress-track"/>
16 </div>;
17 }
18
19 } No newline at end of file
Show file before | Show file after | Hide comments
@@ -1,12 +1,21
1 import { djbase, djclass } from "@implab/djx/declare";
1 import { djbase, djclass } from "@implab/djx/declare";
2 import { DjxWidgetBase } from "@implab/djx/tsx/DjxWidgetBase";
2 import { DjxWidgetBase } from "@implab/djx/tsx/DjxWidgetBase";
3 import { createElement } from "@implab/djx/tsx";
3 import { createElement } from "@implab/djx/tsx";
4 import ProgressBar from "./ProgressBar";
5
6 const ref = <W extends DjxWidgetBase, K extends keyof W>(target: W, name: K) => (v: W[K]) => target.set(name, v);
4
7
5 @djclass
8 @djclass
6 export default class MainWidget extends djbase(DjxWidgetBase) {
9 export default class MainWidget extends djbase(DjxWidgetBase) {
10
11 titleNode?: HTMLHeadingElement;
12
13 progressBar?: ProgressBar;
14
7 render() {
15 render() {
8 return <div>
16 return <div>
9 <h2>Hi!</h2>
17 <h2 ref={ref(this, "titleNode")}>Hi!</h2>
18 <ProgressBar ref={ref(this, "progressBar")}/>
10 </div>;
19 </div>;
11 }
20 }
12 }
21 }
General Comments 0
You need to be logged in to leave comments. Login now