聚合物中凸起的纸张按钮上没有显示波纹效果和阴影
[英]Ripple effect and shadow not showing on Raised paper-button in Polymer
问题描述
I'm having trouble showing the ripple effect and the raised shadow on a polymer paper-button (v1.0 of Polymer). 
我在聚合物纸按钮（聚合物的v1.0）上显示波纹效果和凸起阴影时遇到了麻烦。
It is showing when I run the demonstration (..bower_components/paper-button/demo/index.html) so all the code must be downloaded. 它是在我运行演示（..bower_components / paper-button / demo / index.html）时显示的，因此必须下载所有代码。 Must be missing either an import or some CSS but cannot spot what is different between the demo page and my site page, or if it is some typo. 必须缺少导入或某些CSS，但不能发现演示页面和我的网站页面之间的区别，或者是错别字。
My Elements document is 我的元素文档是
<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"/>
My Page HTML is as follows 我的页面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>
There are two CSS files used by that page 该页面使用了两个CSS文件
Home.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);
}
and 和
Styles.css Styles.css
body {
margin:0px;
background:#e0e0e0;
font-family:Roboto;
}
Can anyone please see where I am going wrong. 谁能知道我要去哪里了。
1 个解决方案
解决方案1
0 2015-06-24 10:52:44
Knew I'd missed something - the include for the paper-button was missing it's extension - it should read. 知道我错过了一些东西-纸质按钮的附件缺少它的扩展名-应该阅读。
<link rel="import" href="../bower_components/paper-button/paper-button.html" />
in addition the css class for the paper-material was also mucking up the display of the ripple - so that has been changed to a class name. 另外，用于纸质材料的css类也使波纹的显示变得更糟-因此已更改为类名。
Removed much of the paper-button class as well meaning I now get a nice blue paper-button 也删除了很多纸质按钮类，这意味着我现在得到了一个漂亮的蓝色纸质按钮
.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;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.