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

听起来你正在为每个应用程序描述寻找一个单独的凸起容器，并且你希望那些位于单个列中的容器。如果是这样，我认为元素就是你想要的。卡可以刷卡或静态

要在您的应用中安装：凉亭安装聚合物/聚合物-ui-card2。进口：
导入：

如果您想查看卡片的外观和行为，目前已在此处链接了演示：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结合起来进行过渡效果

Polymer中网页上的多个对话框

2 个答案: