save file

Author: javascript-2020

utils/misc/html/misc-hdr/v2.0/misc-hdr-v2.0.html

@@ -1,16 +1,19 @@
 
 
-<misc-hdr style='position:relative'>
+<misc-hdr v2.0>
 
       <template shadowrootmode=open>
 
             <style>
 
+  :host
+    {position:relative}
+    
   section
     {margin:0;box-sizing:border-box;display:flex;align-items:center;gap:10px;
       padding-bottom:20px;border-bottom:1px solid lightgray;
     }
-  
+    
   .icon {
         cursor                      : pointer;
         border-radius               : 3px;
@@ -30,100 +33,100 @@
         padding                     : 5px 7px;
   }
 
-  .item-label {
-  }
-  
-  ::slotted(.title) {
-        text-align                  : center;
-        position                    : absolute;
-        left                        : 0;
-        right                       : 0;
-        top                         : 0px;
-        z-index                     : -1;
-        margin                      : 0 auto;
-  }
-
-  
-  .date {
-        position                    : absolute;
-        top                         : 5px;
-        right                       : 5px;
-  }
-  
-  a {
-        color                       : blue;
-  }
-  a:visited {
-        color                       : blue;
-  }
-                  
-            
+  .item-label
+    {}
+    
+  ::slotted([slot=title])
+    {text-align:center;position:absolute;left:0;right:0;top:0px;z-index:-1;margin:0 auto}
+    
+  ::slotted([slot=version])
+    {font-weight:bold;color:blue}
+    
+  .date
+    {}
+    
+  .spc
+    {flex:1}
+    
+  a
+    {color:blue}
+  a:visited
+    {color:blue}
+    
+    
             </style>
 
             <section>
-
+            
+                  <slot name=title></slot>
+                  
+                  
                   <!--
                   <img id=help class=icon style='padding:2px' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAABANJREFUSEvNl2tsVEUUx39n224pEVNsTcGqAYM1gYYP0mCUaILGLqVptzVGKZCArxIU2VYTYpQapU2Mj9jWR9H6wUesUdcGWoRSJIQYjUhETUkkRUVIoGztLqB9bOm2OzL7urtst3eXhsT77c495/+bOXPmzLlCEk9JydOZKsNi8ws2QYqAW4DskOsF4IRC/WRRdIvP393V9fZFM1mZyqC0dONsX8aMZ0SpjUCOmVjou0eJbM/wjb65e/f284l8YsCqbNN8JK0Ii5JeJXN2IXVjkJskMMbMCu4yVP1tolyBD4ohrNftF+dLY/o1AlbljsUIh4CsKwEl5aPoks7mlbFg++bnQF5JSmA6RlbLTHE2eo0V22teANUwHc2kfK2+WeJsGYqABysc9dcotiblPB2jaLDO3rXp1uOrrjCRUpmH02ed+9Ce112BFRdX1NavVmrrOlRQ4/nH4YN2GDgP826AiuXQ1AY1a2B+vsE5dBRO9UF+Hjj3GeMr7wbbncH3f4fB+Q30HA+8Voml4fOdjXWii4PfmnamCnIi4A+3wcvvwck+WFwAj1WC41Vo2gKdB+HYX0HRwWG4747gZJo+NcCPVEBWJuw4AIULYF0ZrK+D8QkeQDyjYxP5sqLcUa5EOqqApMAfdcCvvQbEvnxy8MQEfLILROCrN+CJbXDuHyoRRpWyS7Hd8a4gT8aB/zwNwyOQfS1kzzJWrEPr8sDX3wZXnAicZoEvu6HwVtjwIDz6Ikz4A+ARVIvY7DU/AkvjwB93wlk3LLgJiu8ywEd+g1Nn4fBRGB1LDL7n9mCOXBiE9v3QezIQJQ32wmENHgByr1qoL0v5ENitwT4gPWnwd7/AidNBuf5LIS9aBEsWws4DwTGXG2zLILzHk4PHJwfrLNbh0WGamwv3LoW2PbC2FG7MM6R6foczf0PJMmPs52Mw7AW/H37oiTvioRUHwPGhTqUipGgbHer45EpRLBXzSHKFj9MqYH24cqWilKJtRSCrVUukgBQCr6GwpCiUirkumpsRRBeQcMnUrc1CYFF0dxClOhtFpQmlD9hr9BYx1l7goK6y4LHokqm/6ktClDK9Eh0oShLA9ZmsRfjDZHJKpGGfviS0nb4Wx9MzdSSm7K8ygWYU8yYRb0HoNI+7O338YoFuAiONgM1euxpUm5nvzcBbKGZEGX4P1CcIcayerOnuaPxMj8V0mSvKa95XQrUZ/P5Le/Vs6AT0A08hDJk4iaJ1b2fThrBZDHhJdXVGTn/WF4KY5VFgrwtQtCOECmhCtELt8OR5Hz7S2qpTIfDENfQafr1r5jvJrNwsMgGAonVgzsimaOik4LBYaM+bzRJuCrgbxBHe08vt/h+/MIlmfzV+2v4DHQu0lKRbJa4AAAAASUVORK5CYII='>
                   -->
-                      
+                  
+                  
                   <div class=item>
-                                  
+                  
                         <!--
                         <top-menu component=grp v2.0></top-menu>
                         -->
 
                         <a id=home class=item-label href='/'>
                               home
                         </a>
-                      
+                        
                   </div>
-
+                  
                   <div class=item>
-                                  
+                  
                         <a id=home class=item-label href='/utils/misc/index.html'>
                               misc
                         </a>
-                      
+                        
                   </div>
-
-
-                  <slot></slot>
-
-                
+                  
+                  
+                  <div class=spc></div>
+                  
+                  
+                  <slot name=version></slot>
+                  
+                  
                   <div class=date>
                         <slot name=date></slot>
                   </div>
-
-                
+                  
+                  
             </section>
 
       </template>
 
       <script>
 
 (function misc_hdr({mod,dom,host}){
-                                                                                
+
   var obj   = {
         version   : 'v2.0',
   };
 
         var df=true
         ;
-                                                              
+        
         var ext,$,menu
         ;
-          
+        
         obj.initmod=function(params){
-          
+        
               ext       = params.ext;
               $         = params.$;
               menu      = params.menu;
 
         }//initmod
-
 
-  //:    
-
+        
+  //:
+  
         var top;
 
         obj.init    = async function(){
@@ -133,30 +136,30 @@
               //top.initmod({$,menu});
 
               //await top.init();
-    
+              
 
         }//init
-    
-
+        
+        
   //:
 
 
         obj.initdom   = function(){
-          
+        
               //var root            = $.$(rootnode,'misc-hdr');
               var shadow          = host.shadowRoot;
 
               //top.initdom(shadow);
 
 
         }//initdom
-      
-
-      
+        
+        
+        
   return obj;
 
 })//misc-hdr
-            
+
       </script>
 
 </misc-hdr>