| @@ -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 | 1 | import { djbase, djclass } from "@implab/djx/declare"; |
|
|
2 | 2 | import { DjxWidgetBase } from "@implab/djx/tsx/DjxWidgetBase"; |
|
|
3 | 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 | 8 | @djclass |
|
|
6 | 9 | export default class MainWidget extends djbase(DjxWidgetBase) { |
|
|
10 | ||
|
|
11 | titleNode?: HTMLHeadingElement; | |
|
|
12 | ||
|
|
13 | progressBar?: ProgressBar; | |
|
|
14 | ||
|
|
7 | 15 | render() { |
|
|
8 | 16 | return <div> |
|
|
9 | <h2>Hi!</h2> | |
|
|
17 | <h2 ref={ref(this, "titleNode")}>Hi!</h2> | |
|
|
18 | <ProgressBar ref={ref(this, "progressBar")}/> | |
|
|
10 | 19 |
|
|
|
11 | 20 | } |
|
|
12 | 21 | } |
General Comments 0
You need to be logged in to leave comments.
Login now