I am using this CDN repo: https://github.com/download/polymer-cdn to import Polymer's Iron-Selector into my HTML page, other elements import sucessfully but Iron-Selector component does not. No error message is shown at the console either.
Here's my code:
<html>
<head>
<title>iron-selector</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<base href="https://cdn.rawgit.com/download/polymer-cdn/1.5.0/lib/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="iron-icon/iron-icon.html">
<link rel="import" href="iron-icons/iron-icons.html">
<link rel="import" href="iron-selector/iron-selector.html">
<link rel="import" href="paper-button/paper-button.html">
<body >
<iron-selector selected="0">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</iron-selector>
<div>
<paper-button raised><iron-icon icon="check"></iron-icon>OK</paper-button>
<paper-button raised><iron-icon icon="clear"></iron-icon>Cancel</paper-button>
</div>
</body>
</html>
All components are displayed except iron-selector component, any clues why?
Related
I am trying to follow the documentation (https://www.webcomponents.org/element/PolymerElements/app-layout/app-drawer-layout) for setting the responsiveWidth attribute on my app-drawer-layout in order to have the app-drawer closed by default:
<!doctype html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>title</title>
<script src="/bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="/bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
<link rel="import" href="/bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="/bower_components/app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="/bower_components/app-layout/app-scroll-effects/effects/waterfall.html">
<link rel="import" href="/bower_components/app-layout/app-toolbar/app-toolbar.html">
</head>
<body unresolved class="fullbleed">
<app-drawer-layout fullbleed responsiveWidth="10000px">
<app-drawer>
drawer
</app-drawer>
<app-header-layout fullbleed>
<app-header reveals effects="waterfall">
<app-toolbar>
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
<div main-title>Title</div>
</app-toolbar>
</app-header>
</app-header-layout>
</app-drawer-layout>
</body>
</html>
My bower dependencies are:
"paper-elements": "polymerelements/paper-elements#latest",
"iron-elements": "polymerelements/iron-elements#latest",
"neon-elements": "polymerelements/neon-elements#latest",
"app-elements": "polymerelements/app-elements#latest"
Where am I going wrong?
EDIT: Should probably mention that I am running Chrome 49.
You want responsive-width not responsiveWidth.
Hello I am studying Google's Polymer I followed their guide about Responsive Material Design Layouts But I just noticed that the paper-drawer-panel won't take the whole edge of the top part of the browser window. It has a bit of a gap.
Here's my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Layout</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="bower_components/paper-header-panel/paper-header-panel.html">
<link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="bower_components/iron-icons/iron-icons.html">
<link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
<!-- 2. Use an HTML Import to bring in some elements. -->
<link rel="import" href="bower_components/paper-button/paper-button.html">
<link rel="import" href="bower_components/paper-input/paper-input.html">
</head>
<body class="fullbleed vertical layout">
<paper-drawer-panel class="flex">
<paper-header-panel drawer>
<paper-toolbar>
<div>Application</div>
</paper-toolbar>
<div> Drawer content... </div>
</paper-header-panel>
<paper-header-panel main>
<paper-toolbar>
<paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
<div>Title</div>
</paper-toolbar>
<div> Main content... </div>
</paper-header-panel>
</paper-drawer-panel>
</body>
</html>
The code will render this image as you can see there's a bit of a gap in the edges.
Am I missing something here? What's wrong with my code? Your help and explanation will greatly appreciated. Thanks! :)
You are missing the import of paper-styles.html
I searched many tutorials and all documentation about App router, I have tried the guide at https://erikringsmuth.github.io/app-router/ but I do not understand how I can load an HTML page inside a div, without the other reloaded. I know this is make it with AJAX, but with polymer that is different, how could do ?. This is the code for my index.html file:
<!DOCTYPE html>
<html>
<head>
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="bower_components/iron-icons/iron-icons.html">
<link rel="import" href="bower_components/iron-icon/iron-icon.html">
<link rel="import" href="bower_components/paper-drawer-panel/paper-drawer-panel.html">
<link rel="import" href="bower_components/paper-menu/paper-menu.html">
<link rel="import" href="bower_components/paper-menu/paper-submenu.html">
<link rel="import" href="bower_components/paper-item/paper-item.html">
<link rel="import" href="bower_components/iron-collapse/iron-collapse.html">
<link rel="import" href="bower_components/paper-styles/paper-styles.html">
<link rel="import" href="bower_components/paper-styles/typography.html">
<link rel="import" href="bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="bower_components/iron-ajax/iron-request.html">
<link rel="import" href="bower_components/app-router/app-router.html">
<link rel="import" href="bower_components/pushstate-anchor/pushstate-anchor.html">
<link rel="import" href="bower_components/iron-pages/iron-pages.html">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Reino Unido</title>
</head>
<body>
<paper-drawer-panel>
<div drawer class="menu">
<paper-toolbar class="drawer">
<span>Reino Unido</span>
</paper-toolbar>
<paper-menu class="list">
<paper-item>
<iron-icon icon="home"></iron-icon><span class="Menu">Inicio</span></paper-item>
<paper-item>
<iron-icon icon="shopping-cart"></iron-icon><span class="Menu">Catálogo</span></paper-item>
<paper-item>
<iron-icon icon="star"></iron-icon><span class="Menu">Promociones</span></paper-item>
<paper-item>
<iron-icon icon="drafts"></iron-icon><span class="Menu">Contáctanos</span></paper-item>
<paper-item>
<iron-icon icon="info"></iron-icon><span class="Menu">Acerca de</span></paper-item>
</paper-menu>
</div>
<div main class="page">
<paper-toolbar class="main">
<paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
<span title class="flex">Inicio</span>
<paper-icon-button icon="refresh"></paper-icon-button>
</paper-toolbar>
<div id="sections">
Here I want to load HTML pages
</div>
</div>
</paper-drawer-panel>
<app-router>
<app-route path="/catalogo" import="catalogo.html"></app-route>
</app-router>
</body>
</html>
And the app, looks like:
Screnshoot of the App
You can create every page as a web component and then put the custom element tag inside the div.
This way will save your code very clean and understandable.
I'm playing with Google's Polymer library and I have trouble with iron-list component. It simply is not rendered and no error is thrown.
Here is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="odTimeTracker - UI test with Polymer">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<title>odTimeTracker</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="bower_components/font-roboto/roboto.html">
<link rel="import" href="bower_components/iron-icons/iron-icons.html">
<link rel="import" href="bower_components/paper-styles/classes/typography.html">
<link rel="import" href="bower_components/iron-image/iron-image.html">
<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="bower_components/paper-scroll-header-panel/paper-scroll-header-panel.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="bower_components/iron-ajax/iron-ajax.html">
<link rel="stylesheet" href="styles.css">
</head>
<body unresolved>
<template is="dom-bind" id="app">
<iron-ajax auto url="activities-json.php" handle-as="json"
last-response="{{data}}"></iron-ajax>
<paper-scroll-header-panel class="fit" condenses keep-condensed-header>
<paper-toolbar class="tall">
<paper-icon-button icon="arrow-back"></paper-icon-button>
<div class="flex"></div>
<paper-icon-button icon="search"></paper-icon-button>
<paper-icon-button icon="more-vert"></paper-icon-button>
<div class="bottom title">odTimeTracker</div>
</paper-toolbar>
<iron-list items="[[data.items]]" as="item">
<template>
<div>
<div class="item">
<b><code>[[item.ActivityId]]</code></b>
<div class="pad">
<div class="primary">[[item.Name]]</div>
<div class="secondary">[[item.Started]] – [[item.Stopped]]</div>
<div class="secondary dim">[[item.Description]]</div>
</div>
<iron-icon icon$="[[iconForItem(item)]]"></iron-icon>
</div>
</div>
</template>
</iron-list>
</paper-scroll-header-panel>
</template>
<script>
document.querySelector('template[is=dom-bind]').iconForItem = function(item) {
return item ? (item.Stopped == '' ? 'star-border' : 'star') : '';
};
document.addEventListener('paper-header-transform', function(event) {
var title = this.querySelector('.title');
var detail = event.detail;
var deltaHeight = detail.height - detail.condensedHeight;
var scale = Math.max(0.6, (deltaHeight - detail.y) / (deltaHeight / 0.4) + 0.6);
Polymer.Base.transform('scale(' + scale + ') translateZ(0)', title);
});
</script>
</body>
</html>
Problem is not in consumed JSON (because it's working in other test I written) and I can not figure what the problem is. The code above results just into blank page with header rendered.
It looks like you forgot to import iron-list, throw this in:
<link rel="import" href="bower_components/iron-list/iron-list.html">
Using Polymer 1.0, I have created a paper-drawer-panel layout. In the drawer I have a menu using paper-menu with paper-items which are bound to the iron-pages. I took this example from Content Switcheroo with Core-Pages -- Polycasts #09 and converted it to use the Polymer 1.0 elements. In the code below you can see my commented section in which the paper-items are hard-coded. This works fine.
My next step was to try and build my menu dynamically by using the <template is="dom-repeat"> element to iterate over an arbitrary array of menu items. The menu is rendered correctly (I can see all the menu items that are bound to the array), but I cannot click on the items and no iron-pages are displayed. It seems that the data-category attribute which is used for attr-for-selected is not working inside <template is="dom-repeat">.
In what ways can I get this to work?
Edit: Removing the attr-for-selected attributes and switching the iron-pages using the index work, but relying on the index of the array is not an option in my situation.
My index.html is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>My Test</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="bower_components/polymer/polymer.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/paper-drawer-panel/paper-drawer-panel.html">
<link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="bower_components/paper-header-panel/paper-header-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-styles/paper-styles.html">
<link rel="import" href="bower_components/paper-menu/paper-menu.html">
<style>
</style>
</head>
<body>
<my-app></my-app>
<dom-module id="my-app">
<style>
</style>
<template>
<paper-drawer-panel>
<paper-header-panel drawer class="fit">
<paper-toolbar>
<div>Drawer</div>
</paper-toolbar>
<paper-menu class="content fit" selected="{{page}}" attr-for-selected="data-category">
<!-- This works -->
<!--
<paper-item data-category="item1" label="item1">
<span>John Smith</span>
</paper-item>
<paper-item data-category="item2" label="item2">
<span>Jane Doe</span>
</paper-item>
-->
<!-- This does not work -->
<template is="dom-repeat" items="{{names}}">
<paper-item data-category="{{item.itemNum}}" label="{{item.itemNum}}">
<span>{{item.first}}</span><span>{{item.last}}</span><span>{{item.itemNum}}</span>
</paper-item>
</template>
</paper-menu>
</paper-header-panel>
<paper-header-panel main class="fit">
<paper-toolbar>
<paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
<div class="flex">Main Content</div>
</paper-toolbar>
<iron-pages selected="{{page}}" attr-for-selected="data-category">
<section data-category="item1">
<h1>Item 1</h1>
<div>Item 1 content...</div>
</section>
<section data-category="item2">
<h1>Item 2</h1>
<div>Item 2 content...</div>
</section>
</iron-pages>
</paper-header-panel>
</paper-drawer-panel>
</template>
<script>
Polymer({
is: "my-app",
ready: function() {
this.names = [{itemNum: "item1", first: "John", last: "Smith"}, {itemNum: "item2", first: "Jane", last: "Doe"}];
}
});
</script>
</dom-module>
</body>
</html>
Try <paper-item data-category$="{{item.itemNum}}" label$="{{item.itemNum}}">, from the docs, that will call paper-item.setAttribute('data-category', itemNum) instead of paper-item.data-category = itemNum.
https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#attribute-binding