文章/答案/技术大牛

发布

社区首页 >问答首页 >Google聚合物没有元素样式

问Google聚合物没有元素样式
EN

Stack Overflow用户

提问于 2017-02-01 20:54:44

回答 1查看 266关注 0票数 3

我听说了谷歌聚合物，决定试一试。我在正确地加载组件时遇到了一些问题。我的元素似乎没有任何颜色或任何东西。

当我从谷歌聚合物网站下载初学者工具包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"
  }
}

有人能告诉我为什么我的组件没有显示出来吗？

浏览器:谷歌Chrome版本55.0.2883.95 (64位)

任何帮助都是非常感谢的！提前谢谢。

styling

web

polymer

components

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-02-02 16:15:55

您可以在元素中添加一些自定义样式，就像在文档中一样

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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/41989581

复制

相似问题

问Google聚合物没有元素样式
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Google聚合物没有元素样式EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Google聚合物没有元素样式
EN