使用 Polymer 抽屉更改 Angular-material sidenav答案

【问题标题】：changing the Angular-material sidenav with a Polymer drawer使用 Polymer 抽屉更改 Angular-material sidenav
【发布时间】：2015-06-25 16:25:11
【问题描述】：

我刚开始使用材料设计，我想使用有棱角的材料，但有一些聚合物具有的特性和元素，而有棱角的则没有。因此，我尝试使用抽屉面板和标题面板更改入门包中的 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>

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

【问题讨论】：

实际上我在这里做了更改：github.com/odahcam/polyng。它工作得很好，除了 AOT 编译会产生一个臃肿的包大小，所以我不能在生产中使用它。

标签： html polymer angular-material

【解决方案1】：

Polymer 和 Angular 可以一起使用。

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

如果您点击并拖动屏幕的一侧，您仍然可以访问它。或者，您可以使用 paper-drawer-toggleattribute 放置一些元素（例如按钮）来显示它。否则，请将responsive-width 更改为更适中的值（默认为 640 像素）。

【讨论】：