使用 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 存在，单步执行我可以看到它正在进入方法，但抽屉没有关闭。切换面板也是如此。

为了确保，我已经删除了 .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 来强制响应模式而不管大小。

Answer 2

我猜你想在启动时在<core-scaffold> 上调用closeDrawer()，并在登录时调用togglePanel() 或openDrawer() 方法之一。 （请参阅https://www.polymer-project.org/docs/elements/core-elements.html#core-scaffold 中的“方法”部分。

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

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 是正确的元素。）
我花了一段时间才发现如何获得这两个元素，所以我希望这至少能有所帮助。
史蒂夫