I was working on a project and designing a layout for floor lights like this:
Main page: index.html
<!doctype html>
<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>Test setup</title>
<!-- Place favicon.ico in the `app/` directory -->
<meta name="theme-color" content="#2E3AA1">
<!-- Web Application Manifest -->
<link rel="manifest" href="app/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="app/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="app/images/touch/apple-touch-icon.png">
<!-- Tile icon for Win8 (144x144) -->
<meta name="msapplication-TileImage" content="app/images/touch/ms-touch-icon-144x144-precomposed.png">
<!-- build:css styles/main.css -->
<link rel="stylesheet" href="app/styles/main.css">
<!-- endbuild-->
<!-- build:js bower_components/webcomponentsjs/webcomponents-lite.min.js -->
<script src="app/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="app/elements/elements.html">
<link rel="import" href="floor-map/floor-1.html">
<link rel="import" href="floor-map/floor-2.html">
<link rel="import" href="lighting-gui/light-panel.html">
<!-- For shared styles, shared-styles.html import in elements.html -->
<style is="custom-style" include="shared-styles"></style>
</head>
<body unresolved>
<span id="browser-sync-binding"></span>
<template is="dom-bind" id="app">
<paper-drawer-panel id="paperDrawerPanel">
<!-- Drawer Scroll Header Panel -->
<paper-scroll-header-panel drawer fixed>
</paper-scroll-header-panel>
<!-- Main Area -->
<paper-scroll-header-panel main id="headerPanelMain" condenses keep-condensed-header>
<!-- Main Toolbar -->
<paper-toolbar id="mainToolbar" class="tall">
<paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button>
<span class="space"></span>
<!-- Application name -->
<div class="middle middle-container">
<div class="app-name">Test</div>
</div>
<!-- Application sub title -->
<div class="bottom bottom-container">
<div class="bottom-title">The future of intelligent lighting system</div>
</div>
</paper-toolbar>
<div style="background-color: #842dce">
<paper-tabs attr-for-selected="data-route" selected="[[route]]">
<paper-tab link><a data-route="floor1" href="{{baseUrl}}">Floor-1</a></paper-tab>
<paper-tab link><a data-route="floor2" href="{{baseUrl}}floor2">Floor-2</a></paper-tab>
<paper-tab link><a data-route="floor3" href="{{baseUrl}}floor3">Floor-3</a></paper-tab>
<paper-tab link><a data-route="floor4" href="{{baseUrl}}floor4">Floor-4</a></paper-tab>
<paper-tab link><a data-route="floor5" href="{{baseUrl}}floor5">Floor-5</a></paper-tab>
<paper-tab link><a data-route="floor6" href="{{baseUrl}}floor6">Floor-6</a></paper-tab>
</paper-tabs>
</div>
<!-- Main Content -->
<div class="content">
<iron-pages attr-for-selected="data-route" selected="{{route}}">
<!-- This is floor maps: -->
<section data-route="floor1">
<paper-material elevation="1">
<h2>Floor 1.</h2>
<floor1-view></floor1-view>
</paper-material>
</section>
<section data-route="floor2">
<paper-material elevation="1">
<h2>This is floor 2.</h2>
<floor2-view></floor2-view>
</paper-material>
</section>
<section data-route="floor3">
<paper-material elevation="1">
<h2>This is floor 3.</h2>
</paper-material>
</section>
<section data-route="floor4">
<paper-material elevation="1">
<h2>This is floor 4.</h2>
</paper-material>
</section>
<section data-route="floor5">
<paper-material elevation="1">
<h2>This is floor 5.</h2>
</paper-material>
</section>
<section data-route="floor6">
<paper-material elevation="1">
<h2>This is floor 6.</h2>
</paper-material>
</section>
<!-- this is the lighting layout of floor-->
<section data-route="light-panel">
<paper-material elevation="1">
<h2>**Group 1:**</h2>
<light-panel></light-panel>
</paper-material>
</section>
<section data-route="light-panel2">
<paper-material elevation="1">
<h2>**Group 2:**</h2>
<light-panel></light-panel>
</paper-material>
</section>
<section data-route="light-panel3">
<paper-material elevation="1">
<h2>Group 3:</h2>
<light-panel></light-panel>
</paper-material>
</section>
<section data-route="light-panel4">
<paper-material elevation="1">
<h2>Group 4:</h2>
<light-panel></light-panel>
</paper-material>
</section>
<section data-route="light-panel5">
<paper-material elevation="1">
<h2>Group 5:</h2>
<light-panel></light-panel>
</paper-material>
</section>
<section data-route="light-panel6">
<paper-material elevation="1">
<h2>Group 6:</h2>
<light-panel></light-panel>
</paper-material>
</section>
<section data-route="light-panel7">
<paper-material elevation="1">
<h2>Group 7:</h2>
<light-panel></light-panel>
</paper-material>
</section>
<section data-route="light-panel8">
<paper-material elevation="1">
<h2>Group 8:</h2>
<light-panel></light-panel>
</paper-material>
</section>
<section data-route="light-panel9">
<paper-material elevation="1">
<h2>Group 9:</h2>
<light-panel></light-panel>
</paper-material>
</section>
<section data-route="light-panel10">
<paper-material elevation="1">
<h2>Group 10:</h2>
<light-panel></light-panel>
</paper-material>
</section>
</iron-pages>
</div>
</paper-scroll-header-panel>
</paper-drawer-panel>
<paper-toast id="toast">
<span class="toast-hide-button" role="button" tabindex="0" onclick="app.$.toast.hide()">Ok</span>
</paper-toast>
</template>
<!-- build:js scripts/app.js -->
<script src="app/scripts/app.js"></script>
<!-- endbuild-->
</body>
</html>
some helper element I have created as:
group-map.html
<style>
.big {
--iron-icon-height: 200px;
--iron-icon-width: 200px;
}
</style>
<template>
<paper-button data-dialog="actions" onclick="clickHandler(event)">
<iron-icon class="big" src="../lighting-images/lighting.png"></iron-icon>
</paper-button>
<paper-dialog id="actions">
<h2>Light Profile</h2>
<light-page></light-page>
</paper-dialog>
</template>
</dom-module>
<script>
Polymer({
is: "group-map"
});
</script>
<script>
function clickHandler(e) {
var button = e.target;
while (!button.hasAttribute('data-dialog') && button !== document.body) {
button = button.parentElement;
}
if (!button.hasAttribute('data-dialog')) {
return;
}
var id = button.getAttribute('data-dialog');
var dialog = document.getElementById(id);
if (dialog) {
console.log("dialog open called.");
dialog.open();
console.log("dialog open called.");
}
}
</script>
light-page.html
<dom-module id="light-page">
<style include="iron-flex iron-flex-alignment"></style>
<style>
.button1 {
#apply(--layout-horizontal);
#apply(--layout-start-justified);
}
.button3 {
#apply(--layout-horizontal);
#apply(--layout-end-justified);
}
</style>
<template>
<div class="container horizontal start-justified layout">
<!-- Iron images -->
<img src="../lighting-images/led.png" class="image" alt="lighting-logo" />
</div>
<div class="container horizontal end-justified layout">
<!-- Iron images -->
<img src="../lighting-images/percentage.jpg" class="image" alt="percentage-logo" />
</div>
<div align="right">
<!-- paper slider -->
<paper-slider id="light-brightness" pin value="0"></paper-slider>
<styleis="custom-style">
paper-slider {
--paper-slider-height: 5px;
}
</style>
</div>
<div class="buttons button1">
<!-- paper buttons -->
<paper-button class="custom indigo horizontal end-justified layout" id="light-on" raised>On</paper-button>
<paper-button class="custom indigo" raised id="light-off">Off</paper-button>
<paper-button class="custom indigo horizontal end-justified layout" raised>Submit</paper-button>
</div>
</template>
</dom-module>
<script>
Polymer({
is: "light-page"
});
</script>
light-panel.html
<dom-module id="light-panel" >
<style>
.image {
padding: 2px;
border-color: blue;
border-width: 2px;
border-style: solid;
width: 150px;
height: 150px;
}
.content-wrapper {
background: white;
}
</style>
<template>
<div class="horizontal layout center-justified wrap content-wrapper">
<group-map></group-map>
<group-map></group-map>
<group-map></group-map>
<group-map></group-map>
<group-map></group-map>
<group-map></group-map>
<group-map></group-map>
<group-map></group-map>
<group-map></group-map>
<group-map></group-map>
</div>
</template>
</dom-module>
<script>
Polymer({
is: "light-panel"
});
</script>
floor-1.html
<dom-module id="floor1-view">
<style>
.image {
padding: 2px;
border-color: blue;
border-width: 2px;
border-style: solid;
width: 150px;
height: 150px;
}
.content-wrapper {
background: white;
}
</style>
<template>
<div class="horizontal layout center-justified wrap content-wrapper">
<img class="image" src="../lighting-images/group-1.png">
<img class="image" src="../lighting-images/group-2.png">
<img class="image" src="../lighting-images/group-3.png">
<img class="image" src="../lighting-images/group-4.png">
<img class="image" src="../lighting-images/group-5.png">
<img class="image" src="../lighting-images/group-6.png">
<img class="image" src="../lighting-images/group-7.png">
<img class="image" src="../lighting-images/group-8.png">
<img class="image" src="../lighting-images/group-9.png">
<img class="image" src="../lighting-images/group-10.png">
</div>
</template>
</dom-module>
<script>
Polymer({
is: "floor1-view"
});
</script>
The light-panel.html has the map of light based on one floor which is divided into groups. The group is represented by floor-1.html. The group is a grid of image url anchor tags. All the urls redirects to a section of polymer index.html page.
The section is a grid of paper-dialogue element. The dialogue page is designed to be a layout depicted in light-page.**html. The dialogue element is defined in **group-map.html.
The problem is that it works fine for Group-1 in index page but the click event on dialogue from Group-2 and others is not working. Although each group has exactly same element created in light-panel.html.
Note: All imports are fine no error in chrome source/console terminal.
Guys where am I going wrong.
Thanks
Related
I use this library https://getmdl.io/components/index.html#layout-section/tabs to show "scrollables tabs".
My problem is when I select a tab which is under an arrow (right or left), the tab is well selected but we can't read all the word. On a native application, i saw that the tab bar scroll automatically to show the full selected tab.
Do you know a way to do this with that library ?
You can see a sample here : http://jsfiddle.net/fzngbjcw/2/
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<!-- Tabs -->
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
My tab label 1
My tabulation label 2
My tabulation label 3
My tabulation label 4
My tabulation label 5
My tabulation label 6
</div>
</header>
<main class="mdl-layout__content">
<section class="mdl-layout__tab-panel" id="scroll-tab-1">
<div class="page-content">
</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-2">
<div class="page-content">
</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-3">
<div class="page-content">
</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-4">
<div class="page-content">
</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-5">
<div class="page-content">
</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-6">
<div class="page-content">
</div>
</section>
</main>
</div>
</body>
</html>
Thank you
I don't think Material Design Lite has an auto-scrolling function for tabs that are outside the viewport (you may have seen that feature in a tabs demo for Material Components for the web which is where the developers are now focused, having put MDL into "limited support").
That said, you can implement some simple auto-scrolling in MDL when a tab that is partially outside the viewport is clicked with some js to check whether the clicked tab is partially outside the viewport and then just triggering a click on the appropriate MDL scroll button (so you don't have to reinvent the scroll behavior). Just remember that MDL dynamically creates some of the html elements so you have to listen for the mdl-componentupgraded event before selecting those elements. Following is a working example:
const tabs = document.querySelectorAll('.mdl-layout__tab')
let left, right;
document.addEventListener('mdl-componentupgraded', function(event) {
left = document.querySelector('.mdl-layout__tab-bar-left-button');
right = document.querySelector('.mdl-layout__tab-bar-right-button');
});
for (let tab of tabs) {
tab.addEventListener('click', function(event) {
let bounding = event.target.getBoundingClientRect();
if (bounding.left < 0) {
left.click();
} else if (bounding.right > window.innerWidth) {
right.click()
}
});
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<!-- Tabs -->
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
My tab label 1
My tabulation label 2
My tabulation label 3
My tabulation label 4
My tabulation label 5
My tabulation label 6
</div>
</header>
<main class="mdl-layout__content">
<section class="mdl-layout__tab-panel" id="scroll-tab-1">
<div class="page-content">
</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-2">
<div class="page-content">
</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-3">
<div class="page-content">
</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-4">
<div class="page-content">
</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-5">
<div class="page-content">
</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-6">
<div class="page-content">
</div>
</section>
</main>
</div>
</body>
</html>
I would like to use flexbox in Polymer to create tables out of divs.
But the main problem is that by "cells" squish because of the content inside it when I change the size of the puter div. In the example below, try resizing the browser window. How do I get it to obey the size defined by flex as first priority while still wrapping text?
<!doctype html>
<html>
<head>
<script src='../bower_components/webcomponentsjs/webcomponents-lite.js'></script>
<link rel='import' href='../bower_components/iron-flex-layout/iron-flex-layout-classes.html'>
</head>
<body unresolved>
<dom-module id='base-page'>
<style include='iron-flex iron-flex-alignment'>
.border {
border: 1px solid red;
}
</style>
<template>
<div class='vertical layout' style='width:50%'>
<div class='horizontal layout'>
<div class='flex border'>Short</div>
<div class='flex border'>This is a muuuuuuuuuuuuuuuuuch longer text</div>
<div class='flex border'>And this ie medium</div>
</div>
<div class='horizontal layout'>
<div class='flex border'>e</div>
<div class='flex border'>e</div>
<div class='flex border'>e</div>
</div>
</div>
</template>
</dom-module>
<script>
HTMLImports.whenReady(function() {Polymer({
is: 'base-page'
});});
</script>
<base-page></base-page>
</body>
Thanks
Cheers
Adding this to your border class should solve the issue.
word-break: break-word;
<!doctype html>
<html>
<head>
<base href="https://polygit.org/components/">
<script src='webcomponentsjs/webcomponents-lite.js'></script>
<link rel='import' href='polymer/polymer.html'>
<link rel='import' href='iron-flex-layout/iron-flex-layout-classes.html'>
</head>
<body unresolved>
<dom-module id='base-page'>
<style include='iron-flex iron-flex-alignment'>
.border {
border: 1px solid red;
word-break: break-word;
}
</style>
<template>
<div class='vertical layout' style='width:50%'>
<div class='horizontal layout'>
<div class='flex border'>Short</div>
<div class='flex border'>This is a muuuuuuuuuuuuuuuuuch longer text</div>
<div class='flex border'>And this ie medium</div>
</div>
<div class='horizontal layout'>
<div class='flex border'>e</div>
<div class='flex border'>e</div>
<div class='flex border'>e</div>
</div>
</div>
</template>
</dom-module>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'base-page'
});
});
</script>
<base-page></base-page>
</body>
I'm very new to polymer, based on starter kit 1.3.0, by default, on desktop view show like this:
Desktop View (with toggle menu button)
On mobile:
Mobile View (toggle menu button is missing!)
How can I force the webpage to show the toggle menu button on desktop view ?
Here is index.html, just a default from starter kit, no change at all.
<!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">
<paper-drawer-panel id="paperDrawerPanel">
<!-- Drawer Scroll Header Panel -->
<paper-scroll-header-panel drawer fixed>
<!-- Drawer Toolbar -->
<paper-toolbar id="drawerToolbar">
<span class="menu-name">Menu</span>
</paper-toolbar>
<!-- Drawer Content -->
<paper-menu class="app-menu" attr-for-selected="data-route" selected="[[route]]">
<a data-route="home" href="{{baseUrl}}">
<iron-icon icon="home"></iron-icon>
<span>Home</span>
</a>
<a data-route="users" href="{{baseUrl}}users">
<iron-icon icon="info"></iron-icon>
<span>Users</span>
</a>
<a data-route="contact" href="{{baseUrl}}contact">
<iron-icon icon="mail"></iron-icon>
<span>Contact</span>
</a>
</paper-menu>
</paper-scroll-header-panel>
<!-- Main Area -->
<paper-scroll-header-panel main id="headerPanelMain" condenses keep-condensed-header>
<!-- Main Toolbar -->
<paper-toolbar id="mainToolbar" class="tall">
<paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button>
<span class="space"></span>
<!-- Toolbar icons -->
<paper-icon-button icon="refresh"></paper-icon-button>
<paper-icon-button icon="search"></paper-icon-button>
<!-- Application name -->
<div class="middle middle-container">
<div class="app-name">Polymer Starter Kit</div>
</div>
<!-- Application sub title -->
<div class="bottom bottom-container">
<div class="bottom-title">The future of the web today</div>
</div>
</paper-toolbar>
<!-- Main Content -->
<div class="content">
<iron-pages attr-for-selected="data-route" selected="{{route}}">
<section data-route="home" tabindex="-1">
<paper-material elevation="1">
<my-greeting></my-greeting>
<p class="subhead">You now have:</p>
<my-list></my-list>
<p>Looking for more Web App layouts? Check out our layouts collection. You can also preview them live.</p>
</paper-material>
<paper-material elevation="1">
<p>This is another card.</p>
</paper-material>
<paper-material elevation="1">
<h2 id="license">License</h2>
<p>Everything in this repo is BSD style license unless otherwise specified.</p>
<p>Copyright (c) 2015 The Polymer Authors. All rights reserved.</p>
<p>Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:</p>
<ul>
<li>Redistributions of source code must retain the above copyright
notice, this list of conditions and the following disclaimer.</li>
<li>Redistributions in binary form must reproduce the above
copyright notice, this list of conditions and the following disclaimer
in the documentation and/or other materials provided with the
distribution.</li>
<li>Neither the name of Google Inc. nor the names of its
contributors may be used to endorse or promote products derived from
this software without specific prior written permission.</li>
</ul>
<p>THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.</p>
</paper-material>
</section>
<section data-route="users" tabindex="-1">
<paper-material elevation="1">
<h1 class="page-title" tabindex="-1">Users</h1>
<p>This is the users section</p>
<a href$="{{baseUrl}}users/Addy">Addy</a><br>
<a href$="{{baseUrl}}users/Rob">Rob</a><br>
<a href$="{{baseUrl}}users/Chuck">Chuck</a><br>
<a href$="{{baseUrl}}users/Sam">Sam</a>
</paper-material>
</section>
<section data-route="user-info" tabindex="-1">
<paper-material elevation="-1">
<h1 class="page-title" tabindex="-1">User: {{params.name}}</h1>
<div>This is {{params.name}}'s section</div>
</paper-material>
</section>
<section data-route="contact" tabindex="-1">
<paper-material elevation="1">
<h1 class="page-title" tabindex="-1">Contact</h1>
<p>This is the contact section</p>
</paper-material>
</section>
</iron-pages>
</div>
</paper-scroll-header-panel>
</paper-drawer-panel>
<paper-toast id="toast">
<span class="toast-hide-button" role="button" tabindex="0" onclick="app.$.toast.hide()">Ok</span>
</paper-toast>
</template>
<!-- build:js scripts/app.js -->
<script src="scripts/app.js"></script>
<!-- endbuild-->
</body>
</html>
In app-theme.html add this css:
#paperToggle {
display: inline-block !important;
}
At the bottom of app.js add:
app.toggleDrawer = function() {
var panel = app.$.paperDrawerPanel;
var responsiveWidth = parseInt(panel.responsiveWidth);
if (window.innerWidth > responsiveWidth) {
if (panel.forceNarrow) {
panel.forceNarrow = false;
panel.togglePanel();
} else {
panel.forceNarrow = true;
panel.togglePanel();
}
}
}
In index.html change the line:
<paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button>
to include on-tap="toggleDrawer"
<paper-icon-button id="paperToggle" icon="menu" on-tap="toggleDrawer" paper-drawer-toggle></paper-icon-button>
If this doesn't work, please comment and I'll look in to the problem.
I downloaded the Intermediate - Advanced users version of polymer-starter kit version 1.2.3. I then ran
bower install a-dot
in the polymer-starter-kit directory.
I then added
<script src="../bower_components/platform/platform.js"></script>
before
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
in app/index.html
I also added
<paper-material elevation="1">
<a-dot dot="digraph {1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }"></a-dot>
</paper-material>
in the
<section data-route="home">
</section>
I do not see the graph according to what I saw at:
a-dot webcomponents page
Does anyone out there know what I am missing?
Thank you
Update:
I also have:
<link rel="import" href="../bower_components/a-dot/a-dot.html"/>
in elements/elements.html.
Here is the full index.html:
<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>Power X Hub</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>
<span id="browser-sync-binding"></span>
<template is="dom-bind" id="app">
<paper-drawer-panel id="paperDrawerPanel">
<!-- Drawer Scroll Header Panel -->
<paper-scroll-header-panel drawer fixed>
<!-- Drawer Toolbar -->
<paper-toolbar id="drawerToolbar">
<span class="menu-name">Menu</span>
</paper-toolbar>
<!-- Drawer Content -->
<paper-menu attr-for-selected="data-route" selected="[[route]]">
<a data-route="home" href="{{baseUrl}}">
<iron-icon icon="home"></iron-icon>
<span>Home</span>
</a>
<a data-route="users" href="{{baseUrl}}users">
<iron-icon icon="info"></iron-icon>
<span>Users</span>
</a>
<a data-route="contact" href="{{baseUrl}}contact">
<iron-icon icon="mail"></iron-icon>
<span>Contact</span>
</a>
</paper-menu>
</paper-scroll-header-panel>
<!-- Main Area -->
<paper-scroll-header-panel main id="headerPanelMain" condenses keep-condensed-header>
<!-- Main Toolbar -->
<paper-toolbar id="mainToolbar" class="tall">
<paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button>
<span class="space"></span>
<!-- Toolbar icons -->
<paper-icon-button icon="refresh"></paper-icon-button>
<paper-icon-button icon="search"></paper-icon-button>
<!-- Application name -->
<div class="middle middle-container">
<div class="app-name">Power X Hub</div>
</div>
<!-- Application sub title -->
<div class="bottom bottom-container">
<div class="bottom-title">PowerXHub is a platform that connects and links the enterprise assets like logical models, databases, services, code components and documents and creates an interwoven knowledgebase of the enterprise.</div>
</div>
</paper-toolbar>
<!-- Main Content -->
<div class="content">
<iron-pages attr-for-selected="data-route" selected="{{route}}">
<section data-route="home">
<paper-material elevation="1">
<my-greeting></my-greeting>
<p class="subhead">You now have:</p>
<my-list></my-list>
<p>Looking for more Web App layouts? Check out our layouts collection. You can also preview them live.</p>
</paper-material>
<paper-material elevation="1">
<p>This is another card.</p>
</paper-material>
<a-dot dot="digraph {1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }"></a-dot>
<paper-material elevation="1">
<h1 id="license">License</h1>
<p>Everything in this repo is BSD style license unless otherwise specified.</p>
<p>Copyright (c) 2015 The Polymer Authors. All rights reserved.</p>
<p>Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:</p>
<ul>
<li>Redistributions of source code must retain the above copyright
notice, this list of conditions and the following disclaimer.</li>
<li>Redistributions in binary form must reproduce the above
copyright notice, this list of conditions and the following disclaimer
in the documentation and/or other materials provided with the
distribution.</li>
<li>Neither the name of Google Inc. nor the names of its
contributors may be used to endorse or promote products derived from
this software without specific prior written permission.</li>
</ul>
<p>THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.</p>
</paper-material>
</section>
<section data-route="users">
<paper-material elevation="1">
<h2 class="page-title">Users</h2>
<p>This is the users section</p>
<a href$="{{baseUrl}}users/Addy">Addy</a><br>
<a href$="{{baseUrl}}users/Rob">Rob</a><br>
<a href$="{{baseUrl}}users/Chuck">Chuck</a><br>
<a href$="{{baseUrl}}users/Sam">Sam</a>
</paper-material>
</section>
<section data-route="user-info">
<paper-material elevation="1">
<h2 class="page-title">User: {{params.name}}</h2>
<div>This is {{params.name}}'s section</div>
</paper-material>
</section>
<section data-route="contact">
<paper-material elevation="1">
<h2 class="page-title">Contact</h2>
<p>This is the contact section</p>
</paper-material>
</section>
</iron-pages>
</div>
</paper-scroll-header-panel>
</paper-drawer-panel>
<paper-toast id="toast">
<span class="toast-hide-button" role="button" tabindex="0" onclick="app.$.toast.hide()">Ok</span>
</paper-toast>
<!-- 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>
I found the solution. It was working correctly, but the width and height for the a-dot was not set.
This is the solution:
<paper-material elevation="1">
<a-dot style="width:100%;height:300px;" dot="digraph {1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }"></a-dot>
</paper-material>
Consider this polymer-element
<polymer-element name="my-card" attributes="title content">
<template>
<div style="padding:20px; max-width:600px; margin:50px; margin-bottom:0px" on-tap={{cardTapped}}>
<paper-shadow z="1">
<div class="row">
<div class="col-xs-12" style="margin-top:-20px"><h2>{{title}}</h2></div>
</div>
<hr/>
<div class="row">
<div class="col-xs-12">{{content}}</p></div>
</div>
<paper-ripple fit></paper-ripple>
</paper-shadow>
</div>
</template>
<script>
Polymer({
cardTapped: function(){
alert('tapped!');
}
});
</script>
</polymer-element>
this is how I am using it
<my-card content="this is a test body" title="Here is a nice Title"></my-card>
it works but when I use html in the content attribute like
<my-card content="this is a test body <p>with paragraphs</p>" title="Here is a nice Title"></my-card>
they are handled like text, is there any way to pass HTML code to attribute and embed it in polymer-template
I think what you actually want is to use the <content></content> insertion point within your <template>, rather than creating an attribute named content and using variable interpolation.
Here's an example:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Polymer Demo</title>
</head>
<body>
<script src="//www.polymer-project.org/platform.js"></script>
<link rel="import" href="//www.polymer-project.org/components/polymer/polymer.html">
<link rel="import" href="//www.polymer-project.org/components/paper-shadow/paper-shadow.html">
<link rel="import" href="//www.polymer-project.org/components/paper-ripple/paper-ripple.html">
<polymer-element name="my-card" attributes="title">
<template>
<div style="padding:20px; max-width:600px; margin:50px; margin-bottom:0px" on-tap={{cardTapped}}>
<paper-shadow z="1">
<div class="row">
<div class="col-xs-12" style="margin-top:-20px">
<h2>{{title}}</h2>
</div>
</div>
<hr/>
<div class="row">
<div class="col-xs-12">
<content></content>
</div>
</div>
<paper-ripple fit></paper-ripple>
</paper-shadow>
</div>
</template>
<script>
Polymer({
cardTapped: function(e) {
console.log('tapped!', e);
}
});
</script>
</polymer-element>
<my-card title="Here is a nice Title">
this is a test body <p>with paragraphs</p>
</my-card>
</body>
</html>