dart - 使用 Dart 在核心脚手架中手动隐藏和显示抽屉面板

Question

我正在试验 polymer-dart 中的 core-scaffold 组件，我喜欢这种布局，但我不希望在未登录的情况下左侧的菜单可见。

隐藏/显示该菜单栏的正确方法是什么？(这里是抽屉面板隐藏和显示的示例:https://www.polymer-project.org/samples/layout-elements/scaffold-app.vulcanized.html)

<core-scaffold>
    <core-header-panel id="menu-panel" navigation flex>


        <core-toolbar id="navheader">
            <span>Menu</span>
        </core-toolbar>
        <core-menu>
            <core-item label="Abc" on-click="{{abcClicked}}"></core-item>
            <core-item label="Def" on-click="{{defClicked}}"></core-item>
            <core-item label="Ghi" on-click="{{ghiClicked}}"></core-item>
        </core-menu>
    </core-header-panel>

    <span tool>{{title}}</span>
    <paper-tabs class="bottom fit" selected="0">
        <paper-tab on-click="{{abcClicked}}" class="">ABC</paper-tab>
        <paper-tab on-click="{{defClicked}}" class="">DEF</paper-tab>
        <paper-tab on-click="{{ghiClicked}}" class="">GHI</paper-tab>
    </paper-tabs>

    <div class="content">
        If drawer is hidden, press button to display drawer.

        <paper-button role="button" on-click="{{simulateLoginClicked}}" class="ink" affirmative raised>
            Simulate Login
        </paper-button>

        <paper-button role="button" on-click="{{simulateLogoutClicked}}" class="ink" affirmative raised>
            Simulate Logout
        </paper-button>


    </div>
</core-scaffold>

我正在使用 querySelector 在 dom 中查找面板:

 CoreHedaerPanel chp = shadowRoot.querySelector("#menu-panel");

我没有看到显示/隐藏方法，只是一个隐藏属性，如果设置为 true 隐藏属性只会使抽屉面板的内容消失，抽屉面板本身仍然存在。

更新:

我在做:

CoreScaffold e = shadowRoot.querySelector('core-scaffold');
e.closeDrawer();

单步执行代码，我可以看到 closeDrawer 存在，进入它我可以看到它正在进入方法，但抽屉没有关闭。 togglePanel 也是如此。

为了确保，我删除了 .pub 并修复了 pub 缓存:

pub cache repair
]Downloading analyzer 0.22.4...
Downloading args 0.12.2+1...
Downloading barback 0.15.2+2...
Downloading browser 0.10.0+2...
Downloading code_transformers 0.2.3+2...
Downloading collection 1.1.0...
Downloading core_elements 0.4.0+6...
Downloading crypto 0.9.0...
Downloading csslib 0.11.0+2...
Downloading custom_element_apigen 0.1.3...
Downloading event_bus 0.3.0+2...
Downloading html5lib 0.12.0...
Downloading http 0.11.1+1...
Downloading http_parser 0.0.2+5...
Downloading json_object 1.0.18+2...
Downloading less_dart 0.1.3...
Downloading less_dart 0.1.4...
Downloading logging 0.9.2...
Downloading logging 0.9.3...
Downloading observe 0.12.2...
Downloading paper_elements 0.5.0...
Downloading path 1.3.0...
Downloading path 1.3.1...
Downloading polymer 0.15.1+5...
Downloading polymer_expressions 0.13.0+1...
Downloading pool 1.0.1...
Downloading quiver 0.18.2...
Downloading smoke 0.2.1+1...
Downloading source_maps 0.10.0+1...
Downloading source_span 1.0.2...
Downloading stack_trace 1.1.1...
Downloading stagehand 0.1.5+2...
Downloading string_scanner 0.1.3...
Downloading template_binding 0.13.1...
Downloading usage 0.0.5...
Downloading utf 0.9.0+1...
Downloading watcher 0.9.3...
Downloading web_components 0.9.0+1...
Downloading yaml 2.1.2...

所以我要么做错了什么，要么我遇到了一个错误......

同时记录了一个错误: https://github.com/dart-lang/polymer-dart/issues/12和这里: https://code.google.com/p/dart/issues/detail?id=22077&thanks=22077&ts=1421355859不确定哪个是更正式的记录它的地方。

更新

我的问题的解决方案是:

关闭抽屉:

  CoreScaffold e = shadowRoot.querySelector('core-scaffold');
  e.shadowRoot.querySelector('core-drawer-panel').forceNarrow = true;
  e.closeDrawer();

并在没有覆盖的情况下再次打开抽屉:

  CoreScaffold e = shadowRoot.querySelector('core-scaffold');
  e.shadowRoot.querySelector('core-drawer-panel').forceNarrow = false;
  e.openDrawer();

Answer 1

这里的问题是在非响应模式下 core-drawer-panel 会忽略对 togglePanel 的所有调用(它始终可见)。您可以通过设置 .forceNarrow = true 强制响应模式而不管大小。