Question

我刚刚从材料设计开始，我想使用有角度的材料，但是具有聚合物具有的一些特征和元素，并且没有角度。所以我尝试用抽屉面板和标题面板更改起始包中的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>

整个导航消失了！...我已经读过可以同时使用聚合物和角度两种，但我不知道如何我进口了所有东西......

Answer 1

Polymer and Angular can be used together.

The responsive-width set on it is quite a large value means that it's probably being changed to narrow layout. With a value of 4000px that means that if your display is smaller than that, the drawer will be forced off screen.

You can still access it if you tap and drag the side of the screen. Or you can put some element (eg. a button) with a paper-drawer-toggleattribute to show it. Otherwise, change the responsive-width to a more moderate value (the default is 640px).

使用Polymer抽屉更改Angular-material sidenav

1 个答案: