使用飞镖在 core-scaffold 中手动隐藏和显示 drawer-panel

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-scaffold> 启动和登录时调用 closeDrawer() togglePanel() 或 openDrawer() 方法之一。（参见 https://www.polymer-project.org/docs/elements/core-elements.html#core-scaffold 中的 "Methods" 部分。

您可以在 main()（参见 how to implement a main function in polymer apps）中执行此操作，或者将 <core-scaffold> 包装在自定义 Polymer 元素中并将代码放入 ready() 生命周期方法中。

Answer 2

我希望这不会违反 SO 规则。无论如何，我的两便士价值。我试过：

CoreScaffold scaff = document.querySelector('core-scaffold');
scaff.closeDrawer();

scaff 确实是正确的元素（我在调试中看到它），并且调用了 closeDrawer() （我单步执行）- 但抽屉没有关闭。

我想我会尝试设置抽屉的宽度：

CoreDrawerPanel cdp=scaff.shadowRoot.querySelector('core-drawer-panel');
cdp.drawerWidth ="70";

但这只会让 window 变白=空。（cdp 是正确的元素。）
我花了一段时间才发现如何获得这两个元素，所以我希望至少能有点帮助。
史蒂夫

Answer 3

这里的问题是在非响应模式下 core-drawer-panel 会忽略对 togglePanel 的所有调用（它将始终可见）。您可以通过设置 .forceNarrow = true.

来强制响应模式而不管大小。

使用飞镖在 core-scaffold 中手动隐藏和显示 drawer-panel

Manually hiding and showing drawer-panel in core-scaffold using dart

dart

dart-polymer