[英]Preselect a default page in iron-pages when using with paper-tabs
I am using Polymer iron-pages
along with paper-tabs
in my rails app. 我在我的rails应用程序中使用聚合物
iron-pages
和paper-tabs
。 The problem is none of pages were shown until one of the paper-tabs
was clicked. 问题是在点击其中一个
paper-tabs
之前没有显示任何页面。 I want the first page in iron-pages
to be selected by default without user interaction. 我想在没有用户交互的情况下默认选择
iron-pages
页中的第一页。
I have put both paper-tabs
and iron-pages
in a <template is='dom-bind'></template>
. 我已将
paper-tabs
和iron-pages
放在<template is='dom-bind'></template>
。 Have read documentation about data binding, But I couldn't figure out how to achieve this. 已阅读有关数据绑定的文档,但我无法弄清楚如何实现这一点。 Please somebody suggest your valuable suggestions.
请有人建议你提出宝贵意见。 Thank you.
谢谢。
<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>
Since you're working with an auto-binding template, simply add a short script that sets the selected
property of your <iron-pages>
element at load time. 由于您正在使用自动绑定模板,只需添加一个短脚本,在加载时设置
<iron-pages>
元素的selected
属性。 For example (assuming you are using webcomponents-lite.js
): 例如(假设您使用的是
webcomponents-lite.js
):
<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>
If you are using Polymer you can also set the default view by defining it in the Polymer properties of your web component: 如果您正在使用Polymer,您还可以通过在Web组件的Polymer属性中定义默认视图来设置它:
Polymer({
is: 'your-web-component',
properties: {
selected: {
value: 0
}
}
});
Use the custom element's constructor() to set the property to name of the tab that should be selected 使用自定义元素的构造函数()将属性设置为应选择的选项卡的名称
<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';
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.