Question

是否有类似drawer-toggle的内容，但它没有切换菜单？我想在paper-icon-button中添加一个类似的属性，根据是否显示抽屉显示/隐藏图标按钮。我知道我可以从app-drawer-layout.narrow获得布尔值，但我的代码与下面的代码不完全相同，并且引用<app-drawer-layout>并不容易。以下只是提供drawer-toggle的含义背景的一个例子。

<app-drawer-layout>
  <app-drawer>
    drawer-content
  </app-drawer>
  <app-header-layout>
    <app-header>
      <app-toolbar>
        <paper-icon-button icon="close" drawer-toggle></paper-icon-button>
        <div main-title>App name</div>
      </app-toolbar>
    </app-header>

    main content

  </app-header-layout>
</app-drawer-layout>

Answer 1

您可以将布尔属性绑定到app-drawer-layout的{{1}}属性，并将其与观察者一起使用以显示/隐藏narrow。例如：

paper-icon-button

请注意，现在您需要手动处理抽屉切换（<dom-module id="test-app"> <template> <style> .hide { display: none; } </style> <app-drawer-layout fullbleed narrow="{{visible}}"> <app-drawer id="drawer"> drawer content </app-drawer> <app-header-layout> <app-header> <app-toolbar> <paper-icon-button id="button" icon="menu" on-tap="_onTap"></paper-icon-button> <div class="title" main-title>App name</div> </app-toolbar> </app-header> <div> main content </div> </app-header-layout> </app-drawer-layout> </template> <script> Polymer({ is: 'test-app', properties: { visible: { type: Boolean, observer: '_visibleChanged' } }, _onTap: function() { console.log(this.visible); this.$.drawer.toggle(); }, _visibleChanged: function(value) { this.toggleClass('hide', !value, this.$.button); } }); </script> </dom-module>功能）。

类似属性，如抽屉式切换，但不切换抽屉

1 个答案: