Question

我有一个聚合物核心支架，如下所示：

<core-scaffold id="scaffold">
  <nav>
    <core-toolbar>
      <div>Menu</div>
    </core-toolbar>
    <core-menu valueattr="hash" selected="{{route}}" selectedModel="{{selectedPage}}"
               on-core-select="{{menuItemSelected}}">
        <template repeat="{{page, i in pages}}">
          <paper-item hash="{{page.hash}}" noink style="color: #{{page.hash}}">
            <core-icon icon="label{{route != page.hash ? '-outline' : ''}}"></core-icon>
            <a href="#{{page.hash}}">{{page.label}}</a>
          </paper-item>
        </template>
    </core-menu>
  </nav>
  ...
</core-scaffold>

一切都很美妙。抽屉弹出等等。但我在菜单中有十几个项目，如果屏幕高度不足，则底部被切断。我花了好几个小时试图找出如何让核心菜单滚动到无效。

诀窍是什么？我错过了什么？

Answer 1

您可以使用core-header-panel元素来包装菜单。 core-header-panel将为您管理滚动。我把你的例子放在jsfiddle上，并在这里剪下一段代码，以便详细说明用法：

http://jsfiddle.net/kreide/wh92b8bo/

＆＃13;

<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
<link rel="import" href="http://www.polymer-project.org/components/paper-elements/paper-elements.html">
<link rel="import" href="http://www.polymer-project.org/components/core-elements/core-elements.html">

<polymer-element name="my-element" constructor="" attributes="">
    <template>
        <core-scaffold id="scaffold">
            <core-header-panel navigation flex mode="seamed">
                    <core-toolbar>
                        <div>Menu</div>
                    </core-toolbar>
                    <div class="content">
                        <core-menu valueattr="hash" selected="{{route}}" selectedModel="{{selectedPage}}"
                               on-core-select="{{menuItemSelected}}">
                            <template repeat="{{page, i in pages}}">
                                <paper-item hash="{{page.hash}}" noink style="color: #{{page.hash}}">
                                    <core-icon icon="label{{route != page.hash ? '-outline' : ''}}"></core-icon>
                                    <a href="#{{page.hash}}">{{page.label}}</a>
                                </paper-item>
                            </template>
                        </core-menu>                        
                    </div>
            </core-header-panel>
            <div tool>Title</div>
            <div>Main content goes here...</div>
        </core-scaffold>
    </template>
    <script>
        Polymer('my-element', {
            pages: [{label: '1', hash: "D6E3F2"},
                {label: '2', hash: "D6E3F2"},
                {label: '3', hash: "D6E3F2"},
                {label: '4', hash: "D6E3F2"},
                {label: '5', hash: "D6E3F2"},
                {label: '6', hash: "D6E3F2"},
                {label: '7', hash: "D6E3F2"},
                {label: '8', hash: "D6E3F2"},
                {label: '9', hash: "D6E3F2"},
                {label: '10', hash: "D6E3F2"},
                {label: '11', hash: "D6E3F2"}]
        });
    </script>
</polymer-element>

<my-element></my-element>

＆＃13;

聚合物核心 - 脚手架导航核心菜单不滚动

1 个答案: