[英]Page not showing up until 'paper-tabs' clicked
在單擊紙張選項卡之前,我的滑動頁面不會顯示。
我沒有使用template[is="dom-bind"]
方法,
我正在嘗試使其在Polymer({ is: ...
腳本中運行(不確定是否正確))
這是我現在得到的:
<!--
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Forms (page)
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: -->
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/iron-swipeable-pages/iron-swipeable-pages.html">
<link rel="import" href="../components/component-page.html">
<link rel="import" href="forms-contact.html">
<!-- <link rel="import" href="forms-rebuild.html"> -->
<dom-module id="page-forms">
<template>
<style>
:host {
display: block;
width: 100%;
height: 100%;
box-sizing: border-box;
background: #fff;
}
iron-swipeable-pages { z-index: 1; }
iron-swipeable-pages > * {
padding: 2rem;
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Likely future */
cursor: default;
}
forms-contact { }
.page { height: 100%; }
</style>
<!-- Content
---------------------------------------------------------------------------------------------------------------->
<component-page grid="vertical" layout="start-center" padding-t="20" min-height="1">
<!-- Select Menu -->
<paper-tabs selected="{{selectedForm}}" mobile-width=".9"
tablet-width=".75"
desktop-width=".5">
<paper-tab>
<iron-icon icon="communication:forum"></iron-icon>
Contact Form
</paper-tab>
<paper-tab>
<iron-icon icon="icons:settings"></iron-icon>
Rebuild Form
</paper-tab>
</paper-tabs>
<iron-swipeable-pages on-selected-changed="_onSelectedChanged" selected="{{selectedForm}}" flex="auto" width="100" show-arrow>
<!-- Contact Form -->
<div class="page" grid="vertical" layout="start-center">
<forms-contact mobile-width=".9" tablet-width=".75" desktop-width=".5"></forms-contact>
</div>
<!-- Contact Form -->
<div class="page" grid="vertical" layout="start-center">
<forms-contact mobile-width=".9" tablet-width=".75" desktop-width=".5"></forms-contact>
</div>
</iron-swipeable-pages>
<fx-skew bg="white"></fx-skew>
</component-page>
<!-- Content
---------------------------------------------------------------------------------------------------------------->
</template>
<script>
Polymer({
is: "page-forms",
selectedForm: {
value: 0
},
_onSelectedChanged: function(e) {
var target = e.target;
target.isGesture ? console.log("Swiped by Gesture!") : console.log("Swiped by Selection!");
}
});
</script>
</dom-module>
您直接將selectedForm
指定為值為{value: 0}
的屬性,而不是屬性:
Polymer({
is: "page-forms",
properties: {
selectedForm: {type: Number, value: 0},
},
});
cf. 聚合物:聲明的屬性
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.