聚合物網頁上的多個對話框

Question

我正試圖在同一頁面上顯示多個對話框。這是我的android應用程序在單個頁面上的列表，我發現對話框的大小根據窗口大小而定。我需要他們不要在海誓山盟之上，但無法弄清楚這是否可能。

http://dunriteapps.com/material.htm#apps

<section> 
    <paper-dialog transition="paper-dialog-transition-bottom" opened="true"> 
     ... 
    </paper-dialog> 
</section> 

<section> 
    <paper-dialog transition="paper-dialog-transition-bottom" opened="true"> 
     ... 
    </paper-dialog> 
</section> 

我覺得我應該用比其他對話框的東西。 ：\

Answer 1

聽起來好像您正在爲每個應用描述尋找單獨的凸起容器，並且希望那些位於單個列中的容器。如果是這樣，我認爲元素就是你想要的。卡可以是滑動式或靜態

1. 要在您的應用程序安裝： 涼亭安裝高分子/聚合物-UI-卡2。導入：

2. 導入：

目前旗下有鏈接在這裏演示，如果你想看到該卡的外觀和行爲：http://www.polymer-project.org/components/polymer-ui-card/demo.html

實例從GitHub：

<!-- 
/** 
* @module Polymer UI Elements 
*/ 
/** 
* polymer-ui-card <b>(WIP)</b> 
* 
* Example: 
* 
*  <polymer-ui-card> 
*  ... 
*  </polymer-ui-card> 
* 
* @class polymer-ui-card 
*/ 
/** 
* Fired when the card is swiped away. 
* 
* @event polymer-card-swipe-away 
*/ 
--> 
<link rel="import" href="../polymer/polymer.html"> 

<polymer-element name="polymer-ui-card" attributes="swipeable noCurve" 
    on-trackstart="{{trackStart}}" on-track="{{track}}" on-trackend="{{trackEnd}}" on-flick="{{flick}}"> 
    <template> 
    <link rel="stylesheet" href="polymer-ui-card.css"> 
    <content></content> 
    </template> 
    <script> 
    Polymer('polymer-ui-card', { 
     /** 
     * If true, the card can be swiped. 
     * 
     * @attribute swipeable 
     * @type boolean 
     * @default false 
     */ 
     swipeable: false, 
     noCurve: false, 
     offsetRatio: 0.2, 
     widthRatio: 3, 
     ready: function() { 
     this.setAttribute('touch-action', 'pan-y'); 
     this.transitionEndListener = this.transitionEnd.bind(this); 
     }, 
     leftView: function() { 
     this.removeListeners(); 
     }, 
     addListeners: function() { 
     this.addEventListener('webkitTransitionEnd', 
      this.transitionEndListener); 
     this.addEventListener('transitionend', this.transitionEndListener); 
     }, 
     removeListeners: function() { 
     this.removeEventListener('webkitTransitionEnd', 
      this.transitionEndListener); 
     this.removeEventListener('transitionend', this.transitionEndListener); 
     }, 
     swipeableChanged: function() { 
     if (this.swipeable) { 
      this.addListeners(); 
     } else { 
      this.removeListeners(); 
     } 
     }, 
     animate: function(x) { 
     var s = this.style; 
     var d = x > 0 ? 1 : -1; 
     var w = this.w * this.widthRatio; 
     var x1 = Math.max(0, Math.abs(x) - this.w * this.offsetRatio); 
     var r = Math.max(0, (w - x1)/w); 
     var y = w - Math.sqrt(w * w - x1 * x1); 
     var deg = (1 - r) * d * 90; 
     s.opacity = r; 
     var translate = 'translate3d(' + x + 'px,' + 
      (this.noCurve ? 0 : y) + 'px,0)'; 
     var rotate = 'rotate(' + deg + 'deg)'; 
     s.webkitTransform = s.mozTransform = s.msTransform = s.transform = 
      translate + (this.noCurve ? '' : ' ' + rotate); 
     }, 
     trackStart: function(e) { 
     if (this.swipeable) { 
      e.preventTap(); 
      this.w = this.offsetWidth; 
      this.classList.add('dragging'); 
     } 
     }, 
     track: function(e) { 
     if (this.swipeable) { 
      this.animate(e.dx); 
     } 
     }, 
     trackEnd: function(e) { 
     if (this.swipeable) { 
      this.swipeEnd(Math.abs(e.dx) > this.w/2 && e.dx * e.xDirection > 0, 
       e.dx > 0); 
     } 
     }, 
     flick: function(e) { 
     if (this.swipeable && !this.away) { 
      var v = e.xVelocity; 
      this.swipeEnd(Math.abs(v) > 2, v > 0); 
     } 
     }, 
     swipeEnd: function(away, dir) { 
     this.classList.remove('dragging'); 
     this.away = away; 
     if (away) { 
      var w = this.w * this.widthRatio; 
      this.animate(dir ? w : -w); 
     } else { 
      this.animate(0); 
     } 
     }, 
     transitionEnd: function() { 
     if (this.away) { 
      this.fire('polymer-card-swipe-away'); 
     } 
     } 
    }); 
    </script> 
</polymer-element> 

Answer 2

我認爲你使用了錯誤的元素。
如果你想要的陰影效果，你可以結合正常divs與paper-shadow和core-animated-pages的過渡效果