Question

我有一个Polymer应用程序。我想让我的应用程序“全屏”。但是，该应用程序的一个区域使用动画。使用neon animated pages会带来一些挑战。基本上，我正在尝试创建一个如下所示的布局：

+----------------------------------------+
| My App                                 |
+----------------------------------------+
| +---------------------+  +-----------+ |
| | Content A           |  | Content C | |
| +---------------------+  | details   | |
|                          | go        | |
| +---------------------+  | here      | |
| | Content B           |  +-----------+ |
| | This area fills the |                |
| | rest of the height  |                |
| | and is scrollable   |                |
| |                     |                |
| |                     |                |
| |                     |                |
| +---------------------+                |
+----------------------------------------+

neon-animated-pages的使用似乎打破了高度。这一点，以及组件嵌套的事实导致了问题。我创建了一个Plunker here。我相信相关的代码在本节中：

<dom-module id="app-view">  
    <template>
        <neon-animated-pages selected="[[selectedPageIndex]]" entry-animation="fade-in-animation" exit-animation="fade-out-animation" style="height:100%;">
          <view-1></view-1>
          <view-2></view-2>
        </neon-animated-pages>
    </template>

    <script>
        Polymer({
            is: "app-view",
                ready: function() {
                    this.selectedPageIndex = 0;
                }
        });
  </script> 
</dom-module>

就像设置上面的height CSS属性无关紧要。我不确定。我究竟做错了什么？如何获取内容区域以填充屏幕的剩余部分并在Polymer的世界中进行溢出滚动？

Answer 1

这是一个Jsbin链接，利用Polymer中的布局和弹性定位来实现您想要的效果，我希望它可以帮助您。Layout Exemple Polymer团队创建了一组布局示例和布局元素，您当然可以找到有用的Polymer Layout Examples。

这是你的app-view元素的样子

＆＃13;

<dom-module id="app-view">

  <style is="custom-style">
    :host {
      display: flex;
      @apply(--layout-vertical);
      --paper-button-ink-color: green;
    }
    
    paper-button {
      background-color: #FF5252;
      color: white;
    }
    
    .main {
      width: 100%;
      border: 1px solid yellow;
      @apply(--layout-horizontal);
    }
    
    .right {
      border: 1px solid black;
      @apply(--layout-vertical);
      width: 100%;
      height: 800px;
      padding: 5px;
      @apply(--layout-flex-3);
    }
    
    .contentA {
      border: 1px solid green;
      height: 20%;
      @apply(--layout-vertical);
      @apply(--layout-center-center);
      margin-bottom: 5px;
    }
    
    .contentB {
      height: 100%;
    
      @apply(--layout-vertical);
      @apply(--layout-flex-1);
      @apply(--layout-center-center);
      border: 1px solid orange;
    }
    
    .contentC {
      height: 350px;
      @apply(--layout-vertical);
      @apply(--layout-flex);
      @apply(--layout-center-center) border: 1px solid gray;
    }
  </style>
  <template>

    <paper-header-panel flex>
      <paper-toolbar>
        <div class="spacer title">My App</div>
      </paper-toolbar>


      <div class="main">

        <div class="right">
          <div class="contentA"> Content A
            <paper-button on-click="toggleView">toggle view</paper-button>
          </div>
          <div class="contentB">
            Content B
            <neon-animated-pages selected="{{selectedPageIndex}}" entry-animation="fade-in-animation" exit-animation="fade-out-animation">
              <view-1></view-1>
              <view-2></view-2>
            </neon-animated-pages>
          </div>
        </div>


        <div class="contentC"> Content c</div>

      </div>
    </paper-header-panel>

  </template>

  <script>
    Polymer({
      is: "app-view",
      properties: {
        selectedPageIndex: Number
      },
      ready: function() {
        this.selectedPageIndex = 0;
      },
      toggleView: function() {
       if(this.selectedPageIndex == 1)
        this.selectedPageIndex = 0;
        else
         this.selectedPageIndex = 1;
      }
    });
  </script>
</dom-module>

＆＃13;

聚合物 - 使用霓虹动画页面进行全屏布局

1 个答案: