聚合物：我可以更改纸抽屉面板的内容吗？

Question

您好，请问如果我使用另一个按钮打开抽屉，是否可以更改纸抽屉面板的内容。我只需要这个来制作抽屉将通过一些调整来更改内容的页面。我有我要做的调整，但如何创建此内容更改？

这是我现在的抽屉面板：

<paper-drawer-panel class="indexz" id="paperDrawerPanel" force-narrow right-drawer>
    <div drawer>
        <h2 style="text-align:center ">Adjustments</h2>
        <div class="togglebtn">
            Display search box<paper-toggle-button tabindex="0" id="searchcheck" name="searchcheck" class="red searchcheck"
                                                   onChange="resetradio(this)"></paper-toggle-button>

            <div class="buttons">

                <label for="label3" class="text">Choose search engine</label>
                <paper-radio-group allow-empty-selection aria-labelledby="label3">
                    <paper-radio-button name="google" id="search" class="search" value="https://www.google.com/search"
                                        onclick="formaction(this);setcheckbox()"><label for="search">Google</label>
                    </paper-radio-button>
                    <paper-radio-button name="seznam" id="search" class="search" value="https://search.seznam.cz/"
                                        onclick="formaction(this);setcheckbox()"><label for="search">Seznam</label>
                    </paper-radio-button>
                    <paper-radio-button name="bing" id="search" class="search" value="https://www.bing.com/search"
                                        onclick="formaction(this);setcheckbox()"><label for="search">Bing</label>
                    </paper-radio-button>
                </paper-radio-group>
            </div>
        </div>
        <br/>
        <div class="togglebtn2">
            <paper-toggle-button tabindex="0" id="clock" name="showclock" class="red clockdis"
                                 onChange="resetclock(this);">
                Clock
                hide/show
            </paper-toggle-button>
            <div class="buttons2">
                <label for="label3" class="text">Choose Format</label>
                <paper-radio-group allow-empty-selection aria-labelledby="label3">
                    <paper-radio-button value="24" name="format" class="format"
                                        onChange="setclock();setFormat(this.value)">
                        24 Hours
                    </paper-radio-button>
                    <paper-radio-button value="12" name="format" class="format"
                                        onChange="setclock();setFormat(this.value);setpos()">12 Hours
                    </paper-radio-button>

                </paper-radio-group>
            </div>
        </div>
        <div id="closebtn">
            <paper-button tabindex="0" icon="close" class="cls" paper-drawer-toggle>Close drawer</paper-button>
        </div>
    </div>
    <div main>
        <div>

            <paper-icon-button icon="settings" class="drawerbtn" paper-drawer-toggle></paper-icon-button>

        </div>
    </div>
</paper-drawer-panel>

感谢您的帮助。

Answer 1

要实现您想要的效果，您可以使用 <template is="dom-if" if=""></template> 或 hidden 属性来更改具有 data-binded 属性的抽屉的内容。

抽屉看起来像这样

<paper-drawer-panel class="indexz" id="paperDrawerPanel" force-narrow right-drawer>
    <div hidden$=[[typeTwo]]>
        ...
    </div>
    <div hidden$=[[!typeTwo]]>
        ...
    </div>
</paper-drawer-panel>

或 dom-if 版本

<paper-drawer-panel class="indexz" id="paperDrawerPanel" force-narrow right-drawer>
    <template is="dom-if" if="[[typeTwo]]">
        ...
    </template>
    <template is="dom-if" if="[[!typeTwo]]">
        ...
    </template>
</paper-drawer-panel>

然后您只需将 typeTwo 属性从 false 切换到 true 或其他方式，然后再打开抽屉以更改其内容。在这里它会改变整个内容，但是你可以对一些 sub-elements.

做同样的事情

您可以为每个按钮设置一个功能。

聚合物：我可以更改纸抽屉面板的内容吗？

Polymer: Can i change paper-drawer-panels content?

html

javascript

css

polymer

paper-elements