Polymer 的凸起纸按钮上未显示波纹效果和阴影

Question

我无法在聚合物纸按钮（Polymer v1.0）上显示波纹效果和凸起阴影。

它在我运行演示时显示 (..bower_components/paper-button/demo/index.html)，因此必须下载所有代码。必须缺少导入或某些 CSS，但无法发现演示页面和我的网站页面之间的不同之处，或者是否存在拼写错误。

我的 Elements 文档是

<script src='http://www.polymer-project.org/components/platform/platform.js'></script>

<!-- Iron -->
<link rel="import" href="../bower_components/iron-icons/iron-icons.html"/>
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html"/>

<!-- Paper Elements -->
<link rel="import" href="../bower_components/paper-drawer-panel/paper-drawer-panel.html"/>
<link rel="import" href="../bower_components/paper-header-panel/paper-header-panel.html"/>
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html"/>
<link rel="import" href="../bower_components/paper-input/paper-input.html"/>
<link rel="import" href="../bower_components/paper-styles/paper-styles.html"/>
<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html"/>
<link rel="import" href="../bower_components/paper-material/paper-material.html" />
<link rel="import" href="../bower_components/paper-behaviors/paper-button-behavior.html" />
<link rel="import" href="../bower_components/paper-behaviors/paper-inky-focus-behavior.html" />
<link rel="import" href="../bower_components/paper-button/paper-button" />
<link rel="import" href="../bower_components/paper-fab/paper-fab.html" />

<link rel="import" href="../bower_components/polymer/polymer.html"/>

我的页面HTML如下

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>GP and Practice search</title>   <!-- Scripts -->
    <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="elements/elements.html" />
    <link rel="stylesheet" type="text/css" href="Styles/styles.css" />
    <link rel="stylesheet" type="text/css" href="Styles/home.css"/>
    <!-- google fonts definitions -->
    <link href='http://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>

</head>

<body unresolved class="fullbleed layout vertical">
    <dom-module id="page-scafolding">
        <template>
            <paper-drawer-panel elevation="1">
                <paper-header-panel main mode="waterfall-tall">
                    <paper-toolbar id="mainToolbar">
                        <paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button>
                        <span class="flex"></span>
                        <paper-icon-button icon="search" on-tap="srchandler" id="srchandler"></paper-icon-button>
                        <input type="text" id="searchText" hidden$="{{hideSearch}}" onkeypress="handleKeyPress(event);" />
                        <div class="middle paper-font-display2 app-name ident">Practice List</div>
                    </paper-toolbar>
                    <paper-material elevation="1">
                        <div id="Content" >
                            <span>
                                <paper-input class="searchBox" label="Search for:"  />
                            </span>
                            <div style="text-align:center; padding:10px;">
                                <paper-button tabindex="0" raised="true" class="colorful" on-click="searchPractice">Search for GP Practice</paper-button>
                            </div>
                        </div>
                    </paper-material>

                </paper-header-panel>
            </paper-drawer-panel>
        </template>
        <script>
            Polymer({
                is: "page-scafolding",
                ready: function () {
                this.hideSearch = true;
                this.$.searchText.keyup(function (e) {
                    alert('off to search for something!');
                });
            },
            srchandler: function () {
                // search for contents of search box is showing, otherwise show it.
                if (!this.hideSearch)
                {
                    alert('off to search for something!');
                }
                else {
                    this.hideSearch = !this.hideSearch;
                    if (!this.hideSearch) {
                        this.$.searchText.focus();
                    }
                }
            },
            searchPractice: function () {
                alert('clicking practice search');
            }
            });
        </script>
    </dom-module>

    <page-scafolding />
</body>
</html>

该页面使用了两个 CSS 文件

Home.css

#searchText {
    width:200px;
    border: none;
    line-height: 30px;
    border-radius: 5px;
    background: #3F59B5;
    color: #fff;
    outline: 0;
}

paper-material {
    border-radius: 2px;
    height: 100%;
    padding: 16px 0px 16px 0px;
    width: calc(98.66% - 16px);
    margin: 16px;
    background: white;
}

#Content
{
    padding:16px;
}

paper-button {
    display: block;
    margin-bottom: 24px;
    color: #fff;
    background:#4285F4;
    padding:5px;
    width:175px;
}

paper-button paper-ripple {
      color: var(--paper-pink-a200);
    }

和

Styles.css

body {
    margin:0px;
    background:#e0e0e0;
    font-family:Roboto;
}

谁能看看我哪里出错了。

Answer 1

知道我错过了一些东西 - 纸张按钮的包含缺少它的扩展名 - 它应该阅读。

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

此外，纸张材料的 css 类也弄乱了波纹的显示 - 因此已更改为类名。

删除了许多纸按钮类，这意味着我现在得到了一个漂亮的蓝色纸按钮

.contentContainer {
    border-radius: 2px;
    height: 100%;
    padding: 16px 0px 16px 0px;
    width: calc(98.66% - 16px);
    margin: 16px;
    background: white;
}

#Content
{
    padding:16px;
}

paper-button {
    color: #fff;
    background:#4285F4;
}