I was referring to How to add a side-navigation in polymer and wanted to see how I could make the navigation items work like the ones in https://material.google.com/. Idea is that when any of the navigation Items in bold are clicked they drop-down to display the items.
I am quite new to JavaScript/CSS and Polymer. I would appreciate any help.
When I click on the menu button, I would like the menu and submenu to be displayed. As you can see, I am new to polymer.
This is what I would like:
<link rel="import" href="../paper-material/paper-material.html">
<link rel="import"href="../paper-drawer-panel/paper-drawer-panel.html">
<link rel="import" href="../paper-header-panel/paper-header-panel.html">
<link rel="import" href="../paper-toolbar/paper-toolbar.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../paper-badge/paper-badge.html">
<link rel="import" href="../paper-menu-button/paper-menu-button.html">
<link rel="import" href="../paper-menu/paper-menu.html">
<link rel="import" href="../paper-item/paper-item.html">
<link rel="import" href="../paper-menu/paper-submenu.html">
<link rel="import" href="../app-toolbar/app-toolbar.html">
<link href="../iron-icons/iron-icons.html" rel="import">
<dom-module id="cst-tririga-ux">
<style>
:host {
font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
}
paper-badge {
--paper-badge-margin-left: -8px;
--paper-badge-margin-bottom: -14px;
--paper-badge-background: #29B6F6;
}
.app-toolbar-title {
#apply(--layout-flex);
font-family: "Helvetica Neue", Helvetica, Arial, Roboto;
font-size: 20px;
line-height: 28px;
margin-left: 4px;
pointer-events: none;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
app-toolbar, paper-toolbar section {
padding-left: 30px;
}
app-toolbar, paper-toolbar,
paper-toolbar /deep/ div.toolbar-tools {
height: 45px;
}
#paperDrawerPanel [main] {
text-align: center;
background-color: var(--google-grey-100);
}
#paperDrawerPanel [drawer] {
border-right: 1px solid var(--google-grey-300);
}
.horizontal-section {
padding: 0 !important;
}
.avatar {
display: inline-block;
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
background: #ccc;
}
paper-item {
--paper-item: {
cursor: pointer;
};
}
.sublist paper-item {
padding-left: 30px;
}
.sublist2 paper-item {
padding-left: 50px;
}
}
</style>
<template>
<!-- Toolbar -->
<paper-toolbar>
<paper-icon-button icon="menu"></paper-icon-button>
<span class="title">Title</span>
<paper-icon-button icon="mail" id="notifications"></paper-icon-button>
<paper-badge for="notifications" label="{{myNotifications.length}}"></paper-badge>
<paper-icon-button icon="account-box" id="profile"></paper-icon-button>
</paper-toolbar>
</template>
</dom-module>
<script>
Polymer({
is: "cst-tririga-ux",
behaviors: [TriPlatViewBehavior]
});
</script>
Thanks
S
This will be obtained with an app-drawer https://elements.polymer-project.org/elements/app-layout?active=app-drawer
Related
I have a div with paper-ripple and a button in it. Clicking anywhere inside the div should play the ripple animation which is working as expected but don't want the ripple when the button is clicked.
Please run the code snippet below
<!doctype html>
<head>
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import"/>
<link href="paper-ripple/paper-ripple.html" rel="import"/>
</head>
<body>
<test-elem></test-elem>
<dom-module id="test-elem">
<template>
<style>
div {
width: 150px;
position: relative;
padding: 15px;
border: 1px solid black;
}
button { color: green; border: 1px solid green; }
</style>
<div>
<paper-ripple></paper-ripple>
<button>Button</button>
</div>
</template>
<script>
Polymer({ is: 'test-elem'})
</script>
</dom-module>
</body>
Just changed the HTML structure and added few lines of CSS and it will work as expected
<!doctype html>
<head>
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import"/>
<link href="paper-ripple/paper-ripple.html" rel="import"/>
</head>
<body>
<test-elem></test-elem>
<dom-module id="test-elem">
<template>
<style>
div.inner {
width: 150px;
height: 40px;
position: absolute;
padding: 15px;
border: 1px solid black;
}
button {
color: green;
border: 1px solid green;
position: absolute;
top: 10%;
left: 5%;
}
</style>
<div>
<div class="inner">
<paper-ripple></paper-ripple>
</div>
<button>Button</button>
</div>
</template>
<script>
Polymer({ is: 'test-elem'})
</script>
</dom-module>
</body>
Found the answer. paper-ripple listens to the 'down' action and starts the ripple animation. So need to listen to the same action for the button and stop the event propagation.
Try the snippet below
<!doctype html>
<head>
<base href="https://polygit.org/polymer+v1.9.2/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import"/>
<link href="paper-ripple/paper-ripple.html" rel="import"/>
</head>
<body>
<test-elem></test-elem>
<dom-module id="test-elem">
<template>
<style>
div {
width: 150px;
position: relative;
padding: 15px;
border: 1px solid black;
}
button { color: green; border: 1px solid green; }
</style>
<div>
<paper-ripple></paper-ripple>
<button id="btn">Button</button>
</div>
</template>
<script>
Polymer({ is: 'test-elem',
listeners: {'btn.down': 'onDown'},
onDown: function(e) {
e.stopPropagation();
}
});
</script>
</dom-module>
</body>
In the code given below, i want to display the font-size property on the class: flip-menu-main-icon but which is overridden by font-size property on class fa.
how can I solve this problem?
HTML Code:
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.flip-menu-main-icon {
/* margin-left: 10%; */
font-size: 18px;
float: none;
line-height: 2.5rem;
margin-right: 0;
margin-left: 0;
position: relative;
top: 0;
min-width: 1.5rem;
list-style-type: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<i class="flip-menu-main-icon fa fa-glass "></i><span class="flip-menu-text">Dashboard</span>
use this class
.fa.flip-menu-main-icon {
font-size: 29px;
}
I think you might not be using external css.
Please find the code below:
HTML- index.html
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="custom.css">
</head>
<body>
<i class="flip-menu-main-icon fa fa-glass "></i><span class="flip-menu-text">Dashboard</span>
</body>
</html>
CSS - custom.css
.flip-menu-main-icon {
/* margin-left: 10%; */
font-size: 18px;
float: none;
line-height: 2.5rem;
margin-right: 0;
margin-left: 0;
position: relative;
top: 0;
min-width: 1.5rem;
list-style-type: none;
}
Hope this solves your problem
I am using the polymer paper-slider in my application, however, it always stays stuck in the initial position and does not drag on user action. The progress bar is also not visible. It looks like the following at the moment :
I am using the following code for this :
<!doctype html>
<html>
<head>
<title>Page 2</title>
<meta name="viewport"
content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<script src="../components/webcomponentsjs/webcomponents.js">
</script>
<link rel="import" href="../components/font-roboto/roboto.html">
<link rel="import"
href="../components/core-header-panel/core-header-panel.html">
<link rel="import"
href="../components/core-toolbar/core-toolbar.html">
<link rel="import"
href="../components/paper-tabs/paper-tabs.html">
<link rel="import" href="post-card.html">
<link rel="import" href="components/paper-button/paper-button.html">
<link rel="import" href="components/paper-slider/paper-slider.html">
<style shim-shadowdom>
html,body {
height: 100%;
margin: 0;
background-color: #E5E5E5;
font-family: 'RobotoDraft', sans-serif;
}
core-header-panel {
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
paper-slider{
width:800px;
}
core-toolbar {
background: #03a9f4;
color: white;
}
section {
padding: 20px 0;
}
section > div {
padding: 14px;
font-size: 16px;
}
#tabs {
width: 100%;
margin: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-transform: uppercase;
}
.container {
width: 80%;
margin: 50px auto;
}
paper-button[raised].colored {
background: #03a9f4;
color: white;
margin-top: 30px;
text-align: center;
vertical-align: middle;
}
.slider-markers, #sliderBar, #sliderKnob {
-webkit-user-select: none;
-webkit-user-drag: none;
}
paper-slider::shadow #sliderKnobInner
{
background-color: #0f9d58;
}
paper-slider::shadow #sliderKnobInner::before
{
background-color: #0f9d58;
}
paper-slider::shadow #sliderBar::shadow #activeProgress {
background-color: #0f9d58;
}
#media (min-width: 481px) {
#tabs {
width: 200px;
}
.container {
width: 400px;
}
}
</style>
</head>
<body fullbleed vertical layout unresolved>
<core-header-panel flex mode="normal">
<core-toolbar>
<span flex>Flow</span>
</core-toolbar>
<div class="container" layout vertical center>
<post-card>
<img width="70" height="70"
src="../images/venturimeter.jpg">
<h2>Venturimeter</h2>
<br/>
<div>In order to</div>
<br/><br/>
<paper-slider pin value="50"></paper-slider>
<br/><br/>
</post-card>
<paper-button span raised class="colored" onclick="window.open('Page3.html','_parent');" layout center horizontal>Next</paper-button>
</core-header-panel>
</body>
</html>
What is the mistake I am making here? How do I fix this ?
Thanks !
I have an issue here, I need to bind a paper-tab selection to the core-pages selection inside a core-scaffold.
I have already tried Binding Paper-Tabs to Core-Pages with Polymer and is not working:
tabs.addEventListener('core-select',function()
{
pages.selected = tabs.selected;
console.log("Selected: " + tabs.selected);
});
Returns an error on the console:
tab is not found! index.html:147
Uncaught TypeError: Cannot read property 'addEventListener' of null
Here is the entire code from the page:
<!doctype html>
<html>
<head>
<title>Test Page</title>
<meta name="viewport"
content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<script src="../components/platform/platform.js"></script>
<link rel="import" href="../components/polymer/polymer.html">
<link rel="import" href="../components/font-roboto/roboto.html">
<link rel="import" href="../components/core-header-panel/core-header-panel.html">
<link rel="import" href="../components/core-toolbar/core-toolbar.html">
<link rel="import" href="../components/paper-tabs/paper-tabs.html">
<link rel="import" href="../components/paper-button/paper-button.html">
<link rel="import" href="../components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../components/core-icons/core-icons.html">
<link rel="import" href="../components/core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="../components/core-scaffold/core-scaffold.html">
<link rel="import" href="../components/core-menu/core-menu.html">
<link rel="import" href="../components/core-menu/core-submenu.html">
<link rel="import" href="../components/core-pages/core-pages.html">
<link rel="import" href="../components/core-item/core-item.html">
<link rel="import" href="../components/core-collapse/core-collapse.html">
<link rel="import" href="../components/core-style/core-style.html">
<style>
html,body {
height: 100%;
margin: 0;
background-color: #E5E5E5;
font-family: 'RobotoDraft', sans-serif;
}
.container {
width: 100%;
margin: 50px auto;
}
.heading {
padding: 10px 15px;
background-color: #f3f3f3;
border: 1px solid #dedede;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
font-size: 18px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.content {
position: relative;
padding: 15px;
border: 1px solid #dedede;
border-top: none;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
height:100vh;
}
#media (min-width: 481px) {
#tabs {
width: 200px;
}
.container {
width: 400px;
}
}
core-header-panel {
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
core-toolbar {
background: #03a9f4;
color: white;
}
#ctabs {
width: 100%;
margin: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-transform: uppercase;
}
</style>
</head>
<body unresolved>
<core-scaffold>
<core-header-panel navigation flex>
<core-toolbar id="navheader">
<span>Menu</span>
</core-toolbar>
<core-menu>
<core-submenu icon="settings" label="Select Level">
<core-submenu icon="settings" label="1">
</core-submenu>
</core-submenu>
</core-menu>
</core-header-panel>
<span tool>Learning Portal V1.0</span>
<div class="content">
<core-toolbar>
<paper-tabs id="ctabs" self-end selected="0">
<paper-tab name="all">All</paper-tab>
<paper-tab name="favorites">Favorites</paper-tab>
</paper-tabs>
</core-toolbar>
<core-pages selected="1" id="cpages">
<div>
<paper-button raised style="width: 150px; height: 150px"/>
</div>
<div>
<core-menu>
<core-submenu label="I. Units & Measurement">
<span>Data goes here!</span>
</core-submenu>
</core-menu>
</div>
</core-pages>
</div>
</core-scaffold>
<script>
var tabs = document.querySelector('ctabs');
var pages = document.getElementById('cpages');
if(!tabs)
{
console.log("tab is not found!");
}
if(tabs)
{
console.log("tab is found!");
}
tabs.addEventListener('core-select',function(){
pages.selected = tabs.selected;
console.log("Selected: " + tabs.selected);
});
//function myFunction() {
// console.log("Selected: " + tabs.selected);
//}
</script>
</body>
</html>
I have the latest version installed with the needed files.
Thanks in advance for the help!
This isn't a Polymer issue; your selector is wrong:
var tabs = document.querySelector('ctabs');
Should be
var tabs = document. getElementById('ctabs');
or
var tabs = document.querySelector('#ctabs');
Don't know if i'm missing something but i'm trying to use a core-icon that is in the "social" set and it's not showing up. I've tried other sets to. The "home" icon is working. Here's what i've got so far.
EDIT:
My directory structure looks like the following.... the flat structure was way to unorganized for me
root/
/bower_components
/polymer
/bower_components/
*** Components Here ***
End Edit
<!DOCTYPE html>
<head>
<title>Dashboard</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<script type="text/javascript" src="bower_components/polymer/bower_components/platform/platform.js"></script>
<link rel="import" href="bower_components/polymer/bower_components/font-roboto/roboto.html">
<link rel="import" href="bower_components/polymer/bower_components/core-elements/core-elements.html"/>
<link rel="import" href="bower_components/polymer/bower_components/paper-tabs/paper-tabs.html">
<style>
html, body {
height: 100%;
margin: 0;
background-color: #E5E5E5;
font-family: 'RobotoDraft', sans-serif;
}
core-header-panel {
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
core-toolbar {
background: #03a9f4;
color: white;
}
paper-tabs {
width: 100%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.container {
width: 80%;
margin: 50px auto;
}
#media (min-width: 481px) {
paper-tabs {
width: 200px;
}
.container {
width: 400px;
}
}
core-icon-button {
position: absolute;
top: 3px;
right: 3px;
fill: #636363;
}
:host([favorite]) core-icon-button {
fill: #da4336;
}
</style>
</head>
<body unresolved touch-action="auto">
<core-header-panel>
<core-toolbar>
<paper-tabs selected="home" valueattr="name" self-end>
<paper-tab name="home"><core-icon icon="home"></core-icon> Home</paper-tab>
<paper-tab name="about"><core-icon icon="social:person"></core-icon> About</paper-tab>
</paper-tabs>
</core-toolbar>
</core-header-panel>
Thanks in advance :)
Add an import for the social icons:
<link rel="import" href="bower_components/core-icons/iconsets/social-icons.html">