Skip to content

Commit c008cb0

Browse files
javascript-2020javascript-2020
committed
save file
1 parent 68de4c5 commit c008cb0

File tree

1 file changed

+142
-137
lines changed

1 file changed

+142
-137
lines changed

‎html-components/html/html-components-hdr/v2.0/html-components-hdr-v2.0.html‎

Lines changed: 142 additions & 137 deletions
Original file line numberDiff line numberDiff line change
@@ -1,137 +1,142 @@
1-
2-
3-
<html-components-hdr v2.0>
4-
5-
<template shadowrootmode=open>
6-
7-
<style>
8-
9-
section
10-
{margin:0;box-sizing:border-box;display:flex;align-items:center;gap:10px;border-bottom:1px solid lightgray;margin-bottom:20px;padding-bottom:10px}
11-
12-
.icon
13-
{cursor:pointer;border-radius:3px;border:1px solid gray;box-sizing:border-box;width:38px;height:38px;}
14-
15-
.item
16-
{display:inline-flex;align-items:center;text-align:center;background:buttonface;border-radius:3px;border:1px solid lightgray;padding:5px 7px;}
17-
18-
.item-label
19-
{/*margin-right:10px;*/}
20-
21-
::slotted(.title)
22-
{text-align:center;position:absolute;left:0;right:0;top:0px;z-index:-1;margin:0 auto;color:blue}
23-
24-
25-
.date
26-
{position:absolute;top:5px;right:5px;}
27-
28-
a
29-
{color:blue;}
30-
a:visited
31-
{color:blue;}
32-
33-
34-
</style>
35-
36-
<section>
37-
38-
<div class=item>
39-
40-
<a id=home class=item-label href='/'>
41-
home
42-
</a>
43-
44-
<!--
45-
<top-menu v2.0 component=parent parent=html-components-hdr></top-menu>
46-
-->
47-
48-
49-
</div>
50-
51-
<div class=item>
52-
<a id=list class=item-label href='/html-components/html-components-list/html-components-list.html'>
53-
list
54-
</a>
55-
56-
</div>
57-
58-
<slot></slot>
59-
60-
<div class=date>
61-
<slot name=date></slot>
62-
</div>
63-
64-
</section>
65-
66-
</template>
67-
68-
69-
<script>
70-
71-
72-
(function html_component_hdr({mod,dom,host}){
73-
74-
var obj = {
75-
version : 'v2.0',
76-
};
77-
78-
var df=true
79-
;
80-
81-
82-
var $,menu
83-
;
84-
85-
obj.initmod = function(params){
86-
87-
$ = params.$;
88-
menu = params.menu;
89-
90-
}//initmod
91-
92-
93-
//:
94-
95-
96-
var top;
97-
98-
99-
obj.init = async function(){
100-
101-
/*
102-
top = mod['top-menu']
103-
104-
top.initmod({$,menu});
105-
106-
await top.init();
107-
*/
108-
109-
110-
}//init
111-
112-
113-
//:
114-
115-
116-
obj.initdom = function(rootnode){
117-
118-
var shadow = host.shadowRoot;
119-
120-
//top.initdom(shadow);
121-
122-
123-
}//initdom
124-
125-
126-
127-
return obj;
128-
129-
})//html_component_hdr
130-
131-
132-
</script>
133-
134-
</html-components-hdr>
135-
136-
137-
1+
2+
3+
<html-components-hdr v2.0>
4+
5+
<template shadowrootmode=open>
6+
7+
<style>
8+
9+
section
10+
{margin:0;box-sizing:border-box;display:flex;align-items:center;gap:10px;border-bottom:1px solid lightgray;margin-bottom:20px;padding-bottom:10px}
11+
12+
.icon
13+
{cursor:pointer;border-radius:3px;border:1px solid gray;box-sizing:border-box;width:38px;height:38px;}
14+
15+
.item
16+
{display:inline-flex;align-items:center;text-align:center;background:buttonface;border-radius:3px;border:1px solid lightgray;padding:5px 7px;}
17+
18+
.item-label
19+
{/*margin-right:10px;*/}
20+
21+
::slotted(.title)
22+
{text-align:center;position:absolute;left:0;right:0;top:0px;z-index:-1;margin:0 auto;color:blue}
23+
24+
25+
.date
26+
{position:absolute;top:5px;right:5px;}
27+
28+
a
29+
{color:blue;}
30+
a:visited
31+
{color:blue;}
32+
33+
34+
</style>
35+
36+
<section>
37+
38+
<div class=item>
39+
40+
<a id=home class=item-label href='/'>
41+
home
42+
</a>
43+
44+
<!--
45+
<top-menu v2.0 component=parent parent=html-components-hdr></top-menu>
46+
-->
47+
48+
49+
</div>
50+
51+
<div class=item>
52+
<a id=list class=item-label href='/html-components/html-components.html'>
53+
docs
54+
</a>
55+
</div>
56+
57+
<div class=item>
58+
<a id=list class=item-label href='/html-components/html-components-list/html-components-list.html'>
59+
list
60+
</a>
61+
</div>
62+
63+
<slot></slot>
64+
65+
<div class=date>
66+
<slot name=date></slot>
67+
</div>
68+
69+
</section>
70+
71+
</template>
72+
73+
74+
<script>
75+
76+
77+
(function html_component_hdr({mod,dom,host}){
78+
79+
var obj = {
80+
version : 'v2.0',
81+
};
82+
83+
var df=true
84+
;
85+
86+
87+
var $,menu
88+
;
89+
90+
obj.initmod = function(params){
91+
92+
$ = params.$;
93+
menu = params.menu;
94+
95+
}//initmod
96+
97+
98+
//:
99+
100+
101+
var top;
102+
103+
104+
obj.init = async function(){
105+
106+
/*
107+
top = mod['top-menu']
108+
109+
top.initmod({$,menu});
110+
111+
await top.init();
112+
*/
113+
114+
115+
}//init
116+
117+
118+
//:
119+
120+
121+
obj.initdom = function(rootnode){
122+
123+
var shadow = host.shadowRoot;
124+
125+
//top.initdom(shadow);
126+
127+
128+
}//initdom
129+
130+
131+
132+
return obj;
133+
134+
})//html_component_hdr
135+
136+
137+
</script>
138+
139+
</html-components-hdr>
140+
141+
142+

0 commit comments

Comments
 (0)