在聚合物中的网页上有多个对话框

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

这听起来像是你在为每个应用程序描述寻找一个单独的凸起容器，并且你想把它们放在一个单独的列中。如果是这样的话，我认为元素就是你想要的。卡可以是可刷卡也可以是静态卡

要在应用程序中安装的聚合物卡片: bower install /

1. -ui-Card2。导入:要导入的
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相结合就可以实现过渡效果