पेपर-टैब

Question

के साथ उपयोग करते समय लोहे के पृष्ठों में एक डिफ़ॉल्ट पृष्ठ का चयन करें, मैं अपने रेल ऐप में paper-tabs के साथ पॉलिमर iron-pages का उपयोग कर रहा हूं। समस्या तब तक नहीं है जब तक कि paper-tabs में से कोई एक क्लिक नहीं किया गया था। मैं iron-pages में पहला पृष्ठ डिफ़ॉल्ट रूप से उपयोगकर्ता इंटरैक्शन के बिना चुना जाना चाहता हूं।

मैंने और iron-pages दोनों को <template is='dom-bind'></template> में रखा है। डेटा बाध्यकारी के बारे में प्रलेखन पढ़ें, लेकिन मैं यह समझ नहीं पाया कि इसे कैसे प्राप्त किया जाए। कृपया कोई आपके मूल्यवान सुझावों का सुझाव दें। धन्यवाद।

<template is="dom-bind"> 
    <div class="middle"> 
    <paper-tabs class="bottom self-end" selected="{{selected}}"> 
     <paper-tab>Page 1</paper-tab> 
     <paper-tab>Page 2</paper-tab> 
    </paper-tabs> 
    </div> 
    <div class="bottom"> 
    <iron-pages selected="{{selected}}"> 
     <div> Page 1(This should be selected by default.) 
     </div> 
     <div> Page 2 
     </div> 
    </iron-pages> 
    </div> 
</template> 

Answer 1

आप एक स्वत: बाध्यकारी टेम्पलेट के साथ काम कर रहे हैं के बाद से, बस एक छोटी स्क्रिप्ट लोड करते समय अपने <iron-pages> तत्व की selected संपत्ति सेट जोड़ें। आप पॉलिमर का उपयोग कर रहे हैं, तो आप भी अपने वेब घटक के पॉलिमर गुण में यह परिभाषित करते हुए डिफ़ॉल्ट दृश्य सेट कर सकते हैं

<template is="dom-bind"> 
    <div class="middle"> 
    <paper-tabs class="bottom self-end" selected="{{selected}}"> 
     <paper-tab>Page 1</paper-tab> 
     <paper-tab>Page 2</paper-tab> 
    </paper-tabs> 
    </div> 
    <div class="bottom"> 
    <iron-pages selected="{{selected}}"> 
     <div> Page 1 (This will be selected by default.) 
     </div> 
     <div> Page 2 
     </div> 
    </iron-pages> 
    </div> 
</template> 

<script> 
    document.addEventListener('WebComponentsReady', function() { 
    var template = document.querySelector('template[is="dom-bind"]'); 
    template.selected = 0; // selected is an index by default 
    }); 
</script> 

Answer 2

:

Polymer({ 
    is: 'your-web-component', 

    properties: { 
    selected: { 
     value: 0 
    } 
    } 
}); 

Answer 3

उपयोग उदाहरण के लिए (आप webcomponents-lite.js उपयोग कर रहे हैं यह सोचते हैं) कस्टम तत्व के निर्माता() टैब कि

<paper-tabs id="choiceTab" style="width:400px;" attr-for-selected='name' selected="{{choice}}"> 
        <paper-tab name="tab1">Tab 1</paper-tab> 
        <paper-tab name="tab2">Tab 2</paper-tab> 

       </paper-tabs> 

चयन किया जाना चाहिए, उनके नाम के गुण सेट करने के लिए .....

static get properties() { 
      return { 
       choice: { 
        type: String, 
        reflectToAttribute: true 
       } 
      }; 
     } 

.....

constructor() { 
       super(); 
       this.choice = 'tab1'; 
      }