Question

我有以下代码

<dom-module id="practice-list">
    <template>
        <paper-drawer-panel>
            <paper-header-panel main mode="waterfall-tall">
                <paper-toolbar id="mainToolbar">
                    <paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button>
                    <span class="flex"></span>
                    <paper-icon-button icon="search" on-tap="srchandler" id="srchandler"></paper-icon-button>
                    <input type="text" id="searchText" show$="{{show}}" />
                    <div class="middle paper-font-display2 app-name ident">Practice List</div>
                </paper-toolbar>
            </paper-header-panel>
        </paper-drawer-panel>
    </template>

    <script>
        Polymer({
            is: "practice-list",
            show: {
                type: Boolean,
                value: false
            },
            ready: function () {
            },
            srchandler: function () {
                this.show = !this.show;
                alert('Is it showing?');
            }
        });
    </script>
</dom-module>

反过来又使用以下css

#searchText
{
    width:0px;
    border: none;
    line-height:30px;
    border-radius:5px;

    background:#3F59B5;
    color:#fff;

    outline: 0;

    visibility: hidden;

}

#searchText[show] input {
    padding: 10px;
    visibility: visible;
    width:200px;

}

现在我试图使用这里描述的技术，但无济于事。

polymer search input text from icon

即使我知道纸质图标按钮的点击处理程序正在运行并且调用文本框也没有出现。

Answer 1

为什么不使用HTML5属性hidden？（有关详细信息，请参阅here）

您的输入将更改为：

<input type="text" id="searchText" hidden$="{{hidden}}" />

然后在您的CSS中，您可以删除visibility规则和show属性：

#searchText {
    border: none;
    line-height: 30px;
    border-radius: 5px;
    background: #3F59B5;
    color: #fff;
    outline: 0;
}

#searchText input {
    padding: 10px;
    width: 200px;
}

并将属性show更改为hidden，以使事情更合理：

hidden: {
    type: Boolean,
    value: true
},

Here是一个非常简单的实际操作者。

按下按钮后，使用Polymer显示隐藏文本框

1 个答案: