我正在尝试了解如何在Paper Elements中使用Polymer 1.0。当我添加像按钮这样的基本元素时,它们的样式不正确。我看到一个带阴影的按钮形状。但是,我无法显示任何颜色。一切都只是白色。这是我的代码:
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<script src="res/components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="res/components/polymer/polymer.html">
<!-- Iron Elements -->
<link rel="import" href="res/components/iron-flex-layout/classes/iron-flex-layout.html">
<link rel="import" href="res/components/iron-pages/iron-pages.html">
<link rel="import" href="res/components/iron-signals/iron-signals.html">
<!-- Paper Elements -->
<link rel="import" href="res/components/paper-button/paper-button.html">
<link rel="import" href="res/components/paper-header-panel/paper-header-panel.html">
<link rel="import" href="res/components/paper-toolbar/paper-toolbar.html">
<!-- Neon Elements -->
<link rel="import" href="res/components/neon-animation/neon-animated-pages.html">
<link rel="import" href="res/components/neon-animation/neon-animatable.html">
<link rel="import" href="res/components/neon-animation/neon-animations.html">
</head>
<body class="fullbleed">
<div class="flex">
<div class="vertical layout center-justified">
<h4>Welcome</h4>
<paper-button tabindex="0" on-click="_onLoginButtonClick" raised class="colorful custom">Login</paper-button>
<paper-button on-click="_onSignUpButtonClick">Sign Up</paper-button>
</div>
</div>
</body>
</html>
我试图只展示一个与材料设计主题一致的蓝色按钮。所以,我添加了raised class="colorful"
,如演示中所示。但是,我没有得到蓝色按钮。当我在GitHub上查看code时,我注意到它们似乎在样式部分中定义了所有颜色类。
有没有办法引入主题?或者我是否必须实际定义所有颜色?
谢谢