| @@ -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 | |||
| @@ -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 | |||
| @@ -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 |
|
|
19 | </div>; | |
| 11 | } |
|
20 | } | |
| 12 | } |
|
21 | } | |
General Comments 0
You need to be logged in to leave comments.
Login now