聚合物中纸元素主题入门

时间:2015-11-30 12:37:40

标签: polymer paper-elements

我正在尝试了解如何在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时,我注意到它们似乎在样式部分中定义了所有颜色类。

有没有办法引入主题?或者我是否必须实际定义所有颜色?

谢谢

0 个答案:

没有答案