폴리머 : 종이 서랍 패널의 내용을 변경할 수 있습니까?

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> 

그런 다음 바로 여는 중 이전 true 또는 다른 방법으로 false에서 typeTwo 속성을 전환해야 서랍에서 내용을 변경합니다. 여기서는 전체 내용을 변경하지만 일부 하위 요소에서도 동일한 작업을 수행 할 수 있습니다.

버튼마다 기능을 사용할 수 있습니다.