在ember js中使用材质设计精简时,布局被破坏

时间:2016-07-21 09:27:05

标签: ember.js material-design-lite

当我使用Material design lite实现我的ember web时。存在以下问题。

1.标题显示不正确(标题消失)。 2.抽屉也不能全屏显示。

enter image description here 这是我的代码

application.hbs

<div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">


    <div class="demo-drawer mdl-layout__drawer mdl-color--blue-grey-900 mdl-color-text--blue-grey-50">
            <header class="demo-drawer-header">

              <div class="demo-avatar-dropdown">
                <span>hello@example.com</span>
                <div class="mdl-layout-spacer"></div>

              </div>
            </header>
            <nav class="demo-navigation mdl-navigation mdl-color--blue-grey-800">
            {{#link-to "mytask" class="mdl-navigation__link"}}<i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">home</i>My Task{{/link-to}}
              <a class="mdl-navigation__link" href=""><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">inbox</i>Inbox</a>
            </nav>
          </div>


    {{outlet}}
    </div>

mytask.hbs

<header class="demo-header mdl-layout__header mdl-color--grey-100 mdl-color-text--grey-600">
        <div class="mdl-layout__header-row">
          <span class="mdl-layout-title">My Task</span>
          <div class="mdl-layout-spacer"></div>


        </div>
</header>  

<main class="mdl-layout__content mdl-color--grey-100">
        <div class="mdl-grid demo-content">   
</div>
</main>

余烬-CLI-builds.js

/*jshint node:true*/
/* global require, module */
var EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
    // Add options here
  });

  // Use `app.import` to add additional libraries to the generated
  // output files.
  //
  // If you need to use different assets in different
  // environments, specify an object as the first parameter. That
  // object's keys should be the environment name and the values
  // should be the asset to use in that environment.
  //
  // If the library that you are including contains AMD or ES6
  // modules that you would like to import into your application
  // please specify an object with the list of modules as keys
  // along with the exports of each module as its value.

app.import('bower_components/mdl/material.min.css');
app.import('bower_components/mdl/material.min.js');
app.import('vendor/styles.css');
  return app.toTree();
};

0 个答案:

没有答案