使用飞镖手动隐藏并在核心支架中显示抽屉面板

Question

我正在试验聚合物飞镖中的核心支架组件，我喜欢布局，但如果没有登录，我不希望左侧的菜单可见。

隐藏/显示该菜单栏的正确方法是什么？ （这是抽屉面板隐藏并显示的示例：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

我想您想在启动时致电closeDrawer()，并在登录其中一个方法<core-scaffold>或togglePanel()时。 （请参阅https://www.polymer-project.org/docs/elements/core-elements.html#core-scaffold中的“方法”部分。

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

Answer 2

这里的问题是当处于非响应模式时，core-drawer-panel忽略对togglePanel的所有调用（它将始终可见）。您可以通过设置.forceNarrow = true来强制响应模式而不管大小。

Answer 3

我希望这不违反SO规则。无论如何，我的两个值得。我试过了：

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

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

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

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

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