html - 使用 Polymer 抽屉更改 Angular-material sidenav

Question

我刚开始进行 Material 设计，我想使用棱角 Material ，但具有 polymer 具有而棱角不具备的一些特性和元素。所以我尝试使用抽屉面板和标题面板更改入门包中的 sidenav，如下所示:
之前:

<md-sidenav class="site-sidenav md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')">
    <md-toolbar class="md-whiteframe-z1">
      <h1>Users</h1>
    </md-toolbar>
    <md-list>
      <md-list-item ng-repeat="it in ul.users">
          <md-button ng-click="ul.selectUser(it)" ng-class="{'selected' : it === ul.selected }">
            <md-icon md-svg-icon="{{it.avatar}}" class="avatar"></md-icon>
            {{it.name}}
          </md-button>
      </md-list-item>
    </md-list>
</md-sidenav>

之后:

<paper-drawer-panel responsive-width="4000px">
      <paper-header-panel class="waterfall tbackground" drawer>
        <paper-toolbar class="specialToolbar">
            <div class="paper-font-title">Content</div>
          </paper-toolbar>
    <md-list>
      <md-list-item ng-repeat="it in ul.users">
          <md-button ng-click="ul.selectUser(it)" ng-class="{'selected' : it === ul.selected }">
            <md-icon md-svg-icon="{{it.avatar}}" class="avatar"></md-icon>
            {{it.name}}
          </md-button>
      </md-list-item>
    </md-list>
</paper-header-panel>

整个导航消失了!...我读到可以同时使用 polymer 和 angular，但我不知道如何
顺便说一句，我导入了所有内容...

Answer 1

Polymer 和 Angular 可以一起使用。

它上面设置的responsive-width 值相当大，意味着它可能正在被更改为窄布局。值为 4000px 意味着如果您的显示器小于该值，抽屉将被强制移出屏幕。

如果您点击并拖动屏幕的一侧，您仍然可以访问它。或者您可以将一些元素(例如按钮)与 paper-drawer-toggle 属性一起显示。否则，将 responsive-width 更改为更适中的值(默认值为 640px)。