聚合物中凸起的纸张按钮上不显示波纹效果和阴影

Ripple effect and shadow not showing on Raised paper-button in Polymer

本文关键字：显示 阴影 按钮 张按钮 聚合物      更新时间：2023-09-26

我在显示聚合物纸按钮（聚合物v1.0）上的波纹效应和凸起阴影时遇到问题。

当我运行演示时，它会显示出来（..bower_contensions/paper-button/demo/index.html），所以所有的代码都必须下载。一定是缺少导入或一些CSS，但无法发现演示页面和我的网站页面之间的区别，或者是打字错误。

我的元素文档是

<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文件

主页.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);
    }

和

样式.css

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

有人能看到我哪里出错了吗。

我知道我错过了一些东西——纸张按钮的include缺少它的扩展名——它应该读出来。

<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;
}
相关文章：