问不在纸张材料中的霓虹灯动画页面
EN

Stack Overflow用户

提问于 2016-01-11 23:32:14

回答 1查看 156关注 0票数 1

我的霓虹灯动画页面将不会显示在我的纸张材料中。

在这里，您可以在我的基本示例中看到，我的霓虹灯动画页面将不会显示在纸质材料内部。纸张材质的轮廓由红色边框表示。从理论上讲，纸张材质应该有一个底部边框，以及包含蓝色div的左右边框。我最好的猜测是，是neon-animated-pages元素本身中的CSS规则覆盖了正确的行为。任何帮助都将不胜感激，提前谢谢。

框架exapmle的代码：

    <!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
        <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
        <link rel="import" href="bower_components/neon-animation/neon-animation.html">
        <link rel="import" href="bower_components/neon-animation/neon-animated-pages.html">
        <link rel="import" href="bower_components/neon-animation/neon-shared-element-animatable-behavior.html">

        <link rel="import" href="bower_components/paper-material/paper-material.html" >
        <style>
        </style>

    </head>

    <body fullbleed unresolved vertical>
        <test-iron-page></test-iron-page>
    </body>

<dom-module id="test-iron-page">
    <style is="custom-style">


        p {
            font-size: 5em;
            margin: 0px;
        }

        paper-material {
            margin: 0px;
            border: 1px red solid;
        }

        .bigDiv {
            background: rgb(0, 148, 255);
            height: 150px;
        }

        .smallDiv {
            background: rgb(0, 255, 144);
            height: 40px;
        }
    </style>

    <template>

        <paper-material elevation="2">

            <div id="headerCont">
                <p>Header</p>
            </div>
            <neon-animated-pages id="nap" selected="0">
                <div class="bigDiv">I am a div</div>
                <div class="smallDiv">I am a div</div>
            </neon-animated-pages>

        </paper-material>

    </template>

</dom-module>

<script>
    Polymer({
        is: "test-iron-page"
    });
</script>

</html>

polymer-1.0

html

css

回答 1

Stack Overflow用户

发布于 2016-01-12 03:25:55

指定paper-material的height，这里是用于paper-material的height:300px;的工作演示。

<html>  
<head>

  <title>Template me</title>
  
  <script src="https://rawgit.com/webcomponents/webcomponentsjs/master/webcomponents.js"></script>
  
  <base href="https://cdn.rawgit.com/download/polymer-cdn/1.0.1/lib/">
  <link rel="import" href="polymer/polymer.html">  
  <link rel="import" href="neon-animation/neon-animation.html">
        <link rel="import" href="neon-animation/neon-animated-pages.html">
        <link rel="import" href="neon-animation/neon-shared-element-animatable-behavior.html">

        <link rel="import" href="paper-material/paper-material.html" >
  <link rel="import" href="paper-button/paper-button.html" >
  
</head>
    <body fullbleed unresolved vertical>
        <test-iron-page></test-iron-page>
    </body>

<dom-module id="test-iron-page">
    <style is="custom-style">


        p {
            font-size: 5em;
            margin: 0px;
        }

        paper-material {
            margin: 0px;
            border: 1px red solid;
            height : 300px;
        }

        .bigDiv {
            background: rgb(0, 148, 255);
            height: 150px;
        }

        .smallDiv {
            background: rgb(0, 255, 144);
            height: 40px;
        }
    </style>

    <template>

        <paper-material elevation="2">

            <div id="headerCont">
                <p>Header</p>
            </div>
            <neon-animated-pages id="nap" selected="0">
                <div class="bigDiv">I am a div</div>
                <div class="smallDiv">I am a div</div>
            </neon-animated-pages>
            
        </paper-material>
<paper-button raised on-tap="_next">Next Page</paper-button>
    </template>

</dom-module>

<script>
    Polymer({
        is: "test-iron-page",
        _next : function(){
          this.$.nap.selected = ((this.$.nap.selected+1)%2);
        }
    });
</script>

</html>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/34725264

复制

相似问题

问不在纸张材料中的霓虹灯动画页面
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问不在纸张材料中的霓虹灯动画页面EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问不在纸张材料中的霓虹灯动画页面
EN