Question

我听说Google Polymer并决定尝试一下。我在加载组件时遇到了一些麻烦。我的元素似乎没有任何颜色或任何东西。

当我从Google Polymer网站下载Starter Kit 1.0时，它会显示如下。

但是当我尝试导入到我自己的项目时，它看起来像这样（功能有效）

这是我的HTML

<!DOCTYPE html>
<html>

  <head>

    <title>DueDay</title>

    <!-- Google Fonts -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,700">

    <!-- Web Components -->
    <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>

    <!-- Paper Elements -->
    <link rel="import" href="bower_components/paper-elements/paper-elements.html">

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

    <!-- App Layout -->
    <link rel="import" href="bower_components/app-layout/app-layout.html">

    <!-- Stylesheet -->
    <link rel="stylesheet" href="css/index.css">

  </head>

  <body>

    <app-header reveals>
      <app-toolbar>
        <paper-icon-button icon="search"></paper-icon-button>
        <div id="title" main-title>Tasks</div>
        <paper-icon-button icon="menu" onclick="drawer.toggle()"></paper-icon-button>
      </app-toolbar>
    </app-header>
    <app-drawer id="drawer" align="end" swipe-open>
      <paper-menu class="drawer-menu">
        <paper-item>Item 1</paper-item>
        <paper-item>Item 2</paper-item>
      </paper-menu>
    </app-drawer>

  </body>

</html>

这是我的bower.json文件

{
  "name": "DueDay",
  "description": "A simple to-do application",
  "main": "index.html",
  "authors": [
    "John Doe"
  ],
  "license": "MIT",
  "homepage": "",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "polymer": "Polymer/polymer#^1.7.1",
    "paper-elements": "PolymerElements/paper-elements#^1.0.7",
    "iron-elements": "PolymerElements/iron-elements#^1.0.10",
    "app-layout": "PolymerElements/app-layout#^0.10.6"
  }
}

有人可以告诉我为什么我的组件没有正确显示吗？

浏览器：Google Chrome版本55.0.2883.95（64位）

任何帮助表示赞赏！提前谢谢。

Answer 1

您可以为元素添加一些自定义样式，就像在文档中一样 https://www.polymer-project.org/1.0/toolbox/app-layout
<style is="custom-style"> body { /* No margin on body so toolbar can span the screen */ margin: 0; } app-toolbar { /* Toolbar is the main header, so give it some color */ background-color: #1E88E5; font-family: 'Roboto', Helvetica, sans-serif; color: white; --app-toolbar-font-size: 24px } </style>

<head>
  <title>DueDay</title>
  <base href="https://polygit.org/polymer+:master/components/">
  
  <!-- Web Components -->
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  
  <!-- Google Fonts -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,700">

  <!-- Paper Elements -->
  <link rel="import" href="paper-elements/paper-elements.html">

  <!-- Iron Elements -->
  <link rel="import" href="iron-elements/iron-elements.html">

  <!-- App Layout -->
  <link rel="import" href="app-layout/app-layout.html">

  <!-- Stylesheet -->
  <link rel="stylesheet" href="css/index.css">

  <style is="custom-style">
    body {
      /* No margin on body so toolbar can span the screen */
      margin: 0;
    }
    app-toolbar {
      /* Toolbar is the main header, so give it some color */
      background-color: #1E88E5;
      font-family: 'Roboto', Helvetica, sans-serif;
      color: white;
      --app-toolbar-font-size: 24px
    }
  </style>
</head>
<body>
  <app-header reveals>
    <app-toolbar>
      <paper-icon-button icon="search"></paper-icon-button>
      <div id="title" main-title>Tasks</div>
      <paper-icon-button icon="menu" onclick="drawer.toggle()"></paper-icon-button>
    </app-toolbar>
  </app-header>
  <app-drawer id="drawer" align="end" swipe-open>
    <paper-menu class="drawer-menu">
      <paper-item>Item 1</paper-item>
      <paper-item>Item 2</paper-item>
    </paper-menu>
  </app-drawer>

</body>

</html>

Google Polymer没有元素样式

1 个答案: