代码之家 › 专栏 › 技术社区 › user2049142

如何使用es6html文本语法让materialdesignlite标题栏javascript工作?

material-design-lite es6-class html javascript

user2049142 · 技术社区 · 5 年前

我使用ES6语法和类将标题栏添加到html页面。除标题栏功能外,所有功能都能正常工作,即链接不会随着页面大小的缩小和汉堡的显示而滑入或滑出。除了依赖于javascript的功能之外,其他一切似乎都能正常工作。我该怎么做?

  import {BaseElement} from './base-element.js';

export class TitleBar extends BaseElement{
    constructor(title){
        super();
        this.title = title;
    }
    getElementString(){
        let div = document.createElement("div");
        div.setAttribute("class","mdl-layout mdl-js-layout mdl-layout--fixed-header");
        div.innerHTML = `<header class="mdl-layout__header">
         <div class="mdl-layout__header-row">

           <span class="mdl-layout-title">  ${this.title}</span>
           <!-- Add spacer, to align navigation to the right -->
           <div class="mdl-layout-spacer"></div>
           <!-- Navigation. We hide it in small screens. -->
           <nav class="mdl-navigation mdl-layout--large-screen-only">
             <a class="mdl-navigation__link" href="">Link</a>
             <a class="mdl-navigation__link" href="">Link</a>
             <a class="mdl-navigation__link" href="">Link</a>
             <a class="mdl-navigation__link" href="">Link</a>
           </nav>
         </div>
       </header>
       <div class="mdl-layout__drawer">
         <span class="mdl-layout-title">${this.title}</span>
         <nav class="mdl-navigation">
           <a class="mdl-navigation__link" href="">Link</a>
           <a class="mdl-navigation__link" href="">Link</a>
           <a class="mdl-navigation__link" href="">Link</a>
           <a class="mdl-navigation__link" href="">Link</a>
         </nav>
       </div>
       <main class="mdl-layout__content">
         <div class="page-content"><!-- Your content goes here --></div>
       </main>`;    

       return div;

    } 
}

下面是调用标题栏和索引.html.

 import {Button} from './ui/button.js';
import {Image} from './ui/image.js';
import {DataTable} from './ui/datatable.js';
import {FleetDataService} from './services/fleet-data-service.js';
import {TitleBar} from './ui/title-bar.js';

let titlebar = new TitleBar("My App");
document.getElementById('app').appendChild(titlebar.getElementString());



    <html>
  <head>
    <title>Drones</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="/node_modules/material-design-lite/dist/material.css">
    <script src="node_modules/traceur/bin/traceur.js"></script>
    <script src="node_modules/systemjs/dist/system.js"></script>
    <script src="node_modules/es6-module-loader/dist/es6-module-loader-dev.js"></script>
    <script src="node_modules/material-design-lite/dist/material.js"></script>

    <!--<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDbCBy_cDot9R7uuID8BggA0VhFOejYcDk&callback=googleMapsCallback"></script>-->
  </head>
  <body>
   <script>
    System.import('src/app.js');
    </script>
 <div id='app'>

 </div>
  </body>
</html>

0 回复 | 直到 5 年前