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属性更改带有数据绑定属性的抽屉内容。

抽屉看起来像这样

<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或另一种方式，然后再打开抽屉以更改其内容。这里它将改变整个内容，但你可以对一些子元素做同样的事情。

你可以按每个按钮使用一个功能。

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

1 个答案: