Question

我正在尝试将paper-dropdown封装在paper-button中。为此，我制作了一个自定义元素paper-dropdown-holder：

<polymer-element name="paper-dropdown-holder" extends="paper-button" relative on-tap="{{toggle}}">
<template>
<shadow></shadow>
<content></content>
</template>
<script>
Polymer({
    toggle: function() {
        if (!this.dropdown) {
            this.dropdown = this.querySelector('paper-dropdown');
        }
        this.dropdown && this.dropdown.toggle();
    }
});
</script>
</polymer-element>

我正在页面中使用它，如：

<paper-dropdown-holder raised tabindex="0" class="unpadded">
        <paper-dropdown class="dropdown" flex>
            <core-menu class="menu" selected="0">
                <paper-item><a href="#writing">Writing</a></paper-item>
                <paper-item><a href="#blog">Blog</a></paper-item>
                <paper-item><a href="#art">Art</a></paper-item>
            </core-menu>
        </paper-dropdown>
</paper-dropdown-holder>

我的问题是解密The documentation以弄清楚如何自动将当前所选菜单项的文本放入paper-dropdown-holder。

我的第一次尝试是使用标准paper-dropdown-menu，但我不能像paper-button那样轻松地设计样式。 有没有办法做到这一点不是（因为缺乏一个更好的术语）hacky？我很乐意如果答案能够遵循聚合物理念。

奖金挑战：如何设置默认文字，例如“选择部分”？

Answer 1

Polymer的一个很棒的东西是它的开源......它说你可以学习如何基于现有元素实现新元素....

如果您查看paper-dropdown-menu来源，可以轻松制作类似的内容，但paper-button作为“控件”。

<强>因此

新元素不应扩展core-dropdown-base paper-button。
要使该元素在逻辑上正常工作，您可以使用 paper-dropdown-menu通过绑定（core-overlay-open的一些帮助， core-activate，core-select）事件给相应的处理程序。（实际绑定发生在core-dropdown-base的{{1}}中在dropdown事件监听器内调用的getter。

将它们放在一起：

attached

Demo

如何将选定的核心菜单项放入自定义聚合物元素中？

1 个答案: