与纸标签一起使用时,在铁页中预选默认页面
Preselect a default page in iron-pages when using with paper-tabs
我在 rails 应用程序中使用 Polymer iron-pages
和 paper-tabs
。问题是显示了 none 个页面,直到 paper-tabs
中的一个被点击。我希望在没有用户交互的情况下默认选择 iron-pages
中的第一页。
我已经将 paper-tabs
和 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>
由于您使用的是自动绑定模板,只需添加一个简短的脚本即可在加载时设置 <iron-pages>
元素的 selected
属性。例如(假设您使用的是 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>
如果您使用的是 Polymer,您还可以通过在 Web 组件的 Polymer 属性中定义它来设置默认视图:
Polymer({
is: 'your-web-component',
properties: {
selected: {
value: 0
}
}
});
使用自定义元素的 constructor() 将 属性 设置为应选择的选项卡的名称
<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';
}
我在 rails 应用程序中使用 Polymer iron-pages
和 paper-tabs
。问题是显示了 none 个页面,直到 paper-tabs
中的一个被点击。我希望在没有用户交互的情况下默认选择 iron-pages
中的第一页。
我已经将 paper-tabs
和 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>
由于您使用的是自动绑定模板,只需添加一个简短的脚本即可在加载时设置 <iron-pages>
元素的 selected
属性。例如(假设您使用的是 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>
如果您使用的是 Polymer,您还可以通过在 Web 组件的 Polymer 属性中定义它来设置默认视图:
Polymer({
is: 'your-web-component',
properties: {
selected: {
value: 0
}
}
});
使用自定义元素的 constructor() 将 属性 设置为应选择的选项卡的名称
<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';
}