确定。这是我的最后一招,直到翻转桌子并向Polymer告别。在过去的3天里,我一直在尝试在聚合物中做一些基本的东西,但我还没有能够这样做。在包括一些纸质元素和缓存(显然甚至没有从Chrome的工具箱中禁用它)之间似乎工作了)我不知道哪个是给我最头疼的人。我也没办法调试项目。足够的咆哮......
我开始最终掌握了这个库,直到我尝试使用<paper-dropdown-menu>
和从github下载的自定义元素:<simple-slider>
。
简单滑块似乎不起作用(没有正确显示轮播),而纸张下拉菜单则不选择该项目。
已成功引用所有依赖项(使用Visual Studio代码检查),并且还包含webComponents polyfill。
以下是我的主要.html文件:
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="Polymer Starter Kit">
<title>Polymer Starter Kit</title>
<!-- Place favicon.ico in the `app/` directory -->
<!-- Chrome for Android theme color -->
<meta name="theme-color" content="#2E3AA1">
<!-- Web Application Manifest -->
<link rel="manifest" href="manifest.json">
<!-- Tile color for Win8 -->
<meta name="msapplication-TileColor" content="#3372DF">
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="PSK">
<link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Polymer Starter Kit">
<link rel="apple-touch-icon" href="images/touch/apple-touch-icon.png">
<!-- Tile icon for Win8 (144x144) -->
<meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
<!-- build:css styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild-->
<!-- build:js bower_components/webcomponentsjs/webcomponents-lite.min.js -->
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<!-- endbuild -->
<!-- Because this project uses vulcanize this should be your only html import
in this file. All other imports should go in elements.html -->
<link rel="import" href="elements/elements.html">
<!-- For shared styles, shared-styles.html import in elements.html -->
<style is="custom-style" include="shared-styles"></style>
</head>
<body unresolved>
<!-- build:remove -->
<span id="browser-sync-binding"></span>
<!-- endbuild -->
<template is="dom-bind" id="app">
<pgarena-navbar></pgarena-navbar>
<simple-slider style="width:100%; height:500px" auto-play="true">
<img src="https://placehold.it/350x150"/>
<img src="https://placehold.it/350x150"/>
<img src="https://placehold.it/350x150"/>
</simple-slider>
<div class="container">
<paper-dropdown-menu label="Dinosaurs">
<paper-listbox class="dropdown-content">
<paper-item>allosaurus</paper-item>
<paper-item>brontosaurus</paper-item>
<paper-item>carcharodontosaurus</paper-item>
<paper-item>diplodocus</paper-item>
</paper-listbox>
</paper-dropdown-menu>
<pgarena-tournament-card>
</pgarena-tournament-card>
<pgarena-tournament-card>
</pgarena-tournament-card>
<pgarena-tournament-card>
</pgarena-tournament-card>
<pgarena-tournament-card>
</pgarena-tournament-card>
</div>
<!-- Uncomment next block to enable Service Worker support (1/2) -->
<!--
<paper-toast id="caching-complete"
duration="6000"
text="Caching complete! This app will work offline.">
</paper-toast>
<platinum-sw-register auto-register
clients-claim
skip-waiting
base-uri="bower_components/platinum-sw/bootstrap"
on-service-worker-installed="displayInstalledToast">
<platinum-sw-cache default-cache-strategy="fastest"
cache-config-file="cache-config.json">
</platinum-sw-cache>
</platinum-sw-register>
-->
</template>
<!-- build:js scripts/app.js -->
<script src="scripts/app.js"></script>
<!-- endbuild-->
</body>
</html>
Elements.html:
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<!-- Iron elements -->
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../bower_components/iron-selector/iron-selector.html">
<!-- Paper elements -->
<link rel="import" href="../bower_components/paper-drawer-panel/paper-drawer-panel.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/paper-item/paper-item.html">
<link rel="import" href="../bower_components/paper-material/paper-material.html">
<link rel="import" href="../bower_components/paper-menu/paper-menu.html">
<link rel="import" href="../bower_components/paper-scroll-header-panel/paper-scroll-header-panel.html">
<link rel="import" href="../bower_components/paper-styles/typography.html">
<link rel="import" href="../bower_components/paper-toast/paper-toast.html">
<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<!-- App Elements -->
<link rel="import" href="../bower_components/app-layout/app-toolbar/app-toolbar.html">
<!-- Custom Elements -->
<link rel="import" href="pgarena-navbar/pgarena-navbar.html">
<link rel="import" href="pgarena-container/pgarena-container.html">
<link rel="import" href="pgarena-tournament-card/pgarena-tournament-card.html">
<!-- 3rd Party Non Google -->
<link rel="import" href="../bower_components/polymer-simple-slider/src/simple-slider.html">
<!-- Uncomment next block to enable Service Worker Support (2/2) -->
<!--
<link rel="import" href="../bower_components/platinum-sw/platinum-sw-cache.html">
<link rel="import" href="../bower_components/platinum-sw/platinum-sw-register.html">
-->
<!-- Configure your routes here -->
<link rel="import" href="routing.html">
<!-- Add your elements here -->
<link rel="import" href="../styles/app-theme.html">
<link rel="import" href="../styles/shared-styles.html">
<link rel="import" href="my-greeting/my-greeting.html">
<link rel="import" href="my-list/my-list.html">
BTW:我尝试重新安装所有的凉亭套餐,但它没有用。尝试将最新的Polymer解压缩到bower_components文件夹中并且无法正常工作。
有什么想法吗?我无法相信它使用起来很痛苦。
答案 0 :(得分:1)
简单滑块似乎不起作用(没有正确显示轮播)
我假设你指的是polymer-simple-slider。该项目取决于Polymer 0.2.x,它与最新版本的Polymer(撰写本文时为1.10.1)不兼容。如果您对升级该元素感兴趣,可以按照migration guide进行操作。元素的来源看起来非常简单,升级IMO也不会花费太多精力。
纸张下拉菜单不会选择该项目。
请澄清你的意思。选择在这里工作正常:
<head>
<base href="https://polygit.org/polymer+1.10.1/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="neon-animation/web-animations.html">
<link rel="import" href="paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="paper-listbox/paper-listbox.html">
<link rel="import" href="paper-item/paper-item.html">
</head>
<body>
<paper-dropdown-menu label="Dinosaurs">
<paper-listbox slot="dropdown-content" class="dropdown-content">
<paper-item>allosaurus</paper-item>
<paper-item>brontosaurus</paper-item>
<paper-item>carcharodontosaurus</paper-item>
<paper-item>diplodocus</paper-item>
</paper-listbox>
</paper-dropdown-menu>
</body>