抽屉不能使用`mdl-layout - fixed-header` class

时间:2015-08-02 04:14:57

标签: javascript css reactjs material-design-lite

运作良好:

class Layout extends React.Component {
  render() {
    return <div className="mdl-layout mdl-js-layout">
      <div className="mdl-layout__header">
        <div className="mdl-layout__header-row">
          <span className="mdl-layout-title">Remember</span>
        </div>
      </div>

      <div className="mdl-layout__drawer">
        <span className="mdl-layout-title">Remember</span>
        <div className="mdl-navigation">
          <a className="mdl-navigation__link" href="">Link</a>
          <a className="mdl-navigation__link" href="">Link</a>
          <a className="mdl-navigation__link" href="">Link</a>
          <a className="mdl-navigation__link" href="">Link</a>
        </div>
      </div>

      <div className="mdl-layout__drawer-button">
        <i className="material-icons">menu</i>
      </div>

      <div className="mdl-layout__content">
        <div className="page-content">{this.props.children}</div>
      </div>
    </div>;
  }
}

但是,它现在不起作用了:

class Layout extends React.Component {
  render() {
    return <div className="mdl-layout mdl-js-layout mdl-layout--fixed-header">
      <div className="mdl-layout__header">
        <div className="mdl-layout__header-row">
          <span className="mdl-layout-title">Remember</span>
        </div>
      </div>

      <div className="mdl-layout__drawer">
        <span className="mdl-layout-title">Remember</span>
        <div className="mdl-navigation">
          <a className="mdl-navigation__link" href="">Link</a>
          <a className="mdl-navigation__link" href="">Link</a>
          <a className="mdl-navigation__link" href="">Link</a>
          <a className="mdl-navigation__link" href="">Link</a>
        </div>
      </div>

      <div className="mdl-layout__drawer-button">
        <i className="material-icons">menu</i>
      </div>

      <div className="mdl-layout__content">
        <div className="page-content">{this.props.children}</div>
      </div>
    </div>;
  }
}

两个代码块的差异只是mdl-layout--fixed-header类。要使用固定标头,插入的类mdl-layout--fixed-header将停止工作抽屉。这个用法有什么问题吗?

1 个答案:

答案 0 :(得分:-1)

嗯...

我找到了理由。

使用mdl-layout--fixed-header课程时,

<div className="mdl-layout__drawer-button">
  <i className="material-icons">menu</i>
</div>

不需要。

:(

非常感谢。