I'm using the app-drawer-layout from Polymer App Toolbox, and instead of having a fixed title in <div main-title>My App</div>, I'd like to have it work dynamically with the iron-pages-navigation.
Ideally I'd like to specify the title in each element loaded in iron-pages, but defining it in the navigation is also a solution. However, I'm kinda stuck as none of the attempts I've made seems to work.
My code looks like this:
<app-header condenses fixed effects="waterfall">
<app-toolbar>
<paper-icon-button icon="mdi:menu" drawer-toggle></paper-icon-button>
<div main-title>My App</div>
</app-toolbar>
</app-header>
<iron-pages role="main" selected="[[page]]" attr-for-selected="name">
<moso-profile name="profile"></moso-profile>
<moso-resume name="resume"></moso-resume>
<moso-portfolio name="portfolio"></moso-portfolio>
<moso-contact name="contact"></moso-contact>
</iron-pages>
Now, I've tried using the <content select=".page-title"></content> (Polymer Docs) and then have a <div class="page-title">New title</div> in each loaded element. Didn't work.
I've also tried adding a title attribute to each element in iron-pages (like so: <moso-profile title="Profile" name="profile"></moso-profile>) and then try to one/two way bind it with [[page.title]], no luck either.
Am I doing something wrong? Or is it not possible anymore?
Why not something like this?
<app-header condenses fixed effects="waterfall">
<app-toolbar>
<paper-icon-button icon="mdi:menu" drawer-toggle></paper-icon-button>
<div main-title>{{page}}</div>
</app-toolbar>
</app-header>
<iron-pages role="main" selected="[[page]]" attr-for-selected="name">
<moso-profile name="profile"></moso-profile>
<moso-resume name="resume"></moso-resume>
<moso-portfolio name="portfolio"></moso-portfolio>
<moso-contact name="contact"></moso-contact>
</iron-pages>
or if you want to control the title even more you can use a computed function:
<app-header condenses fixed effects="waterfall">
<app-toolbar>
<paper-icon-button icon="mdi:menu" drawer-toggle></paper-icon-button>
<div main-title>{{_computeTitle(page)}}</div>
</app-toolbar>
</app-header>
and in javascript:
_computeTitle: function(page) {
if (page == 'profile') {
return 'My Profile';
}
...
}
Related
I've been having issues trying to change the start point of my tabs for my app bar. I want them to start after the 3rd Column but I haven't been able to make it work.
Code is below:
<template>
<div class = "header">
<v-toolbar app prominent>
<v-layout-row>
<v-layout-column>
<v-img
max-width="100"
src="../../assets/large.png"
/>
</v-layout-column>
<v-layout-column/>
<v-layout-column justify-end>
<HeaderAccount colorTheme="#FFA200" />
</v-layout-column>
</v-layout-row>
<template v-slot:extension>
<v-tabs>
<v-row>
<v-col cols = '3'/>
<v-col cols = '6'>
<v-tab v-for="l in links" :key="l.path" :to="l.path">
{{ l.text }}
</v-tab>
</v-col>
</v-row>
</v-tabs>
</template>
</v-toolbar>
</div>
</template>
Any assistance would be greatly appreciated!
I'm not clearly understand your template in case of layouts, but the main issue is that <v-tab> tag should be a direct child element of <v-tabs>.
Otherwise, the tab styles will not be applied correctly.
So your template should be similar to:
<div id="app">
<v-app id="inspire">
<v-toolbar>
...default toolbar content
<template v-slot:extension>
<v-row>
<v-col cols="3" class="lime accent-1">Three cols item</v-col>
<v-col cols="6">
<v-tabs
dark
background-color="primary"
grow
>
<v-tab>
Item One
</v-tab>
<v-tab>
Item Two
</v-tab>
<v-tab>
Item Three
</v-tab>
</v-tabs>
</v-col>
</v-row>
</template>
</v-toolbar>
</v-app>
</div>
Test this at CodePen.
I have a dropdown like this :
<div>
<paper-dropdown-menu label="Speciality">
<paper-listbox id="selectSpeciality" slot="dropdown-content" attr-for-selected="name" selected="{{doctor.speciality}}" class="dropdown-content">
<template is="dom-repeat" items="[[specs]]">
<paper-item name="[[item]]">[[item]]</paper-item>
</template>
</paper-listbox>
</paper-dropdown-menu>
</div>
And data like this :
How to sorting by alpabetical ?
Thanks
You have to order the categories obtained instead of showing them directly, you can create a function that sorts them or better save them already sorted.
Is it possible to pass the bindings from one child to the other child in the parent? The parent doesn't need to use the bindings. It will need to be 2 way.
To put it another way, I need to siblings to share data-bindings.
<app-drawer id="drawer">
<div class='left-bar-container'>
<listings-drawer></listings-drawer>
<!-- Main content -->
<iron-pages
selected="[[page]]"
attr-for-selected="name"
fallback-selection="view404"
role="main">
<my-view1 name="my-view1" form-loading="{{isLoading}}"
pic="{{pics}}" area-code="{{areaCode}}"></my-view1>
I need <listings-drawer></listings-drawer> to have access to form-loading="{{isLoading}}", pic="{{pics}}", and area-code="{{areaCode}}"
<app-drawer id="drawer">
<div class='left-bar-container'>
<listings-drawer loading="{{isLoading}}"
some-pics="{{pics}}" some-area-code="{{areaCode}}"></listings-drawer>
<!-- Main content -->
<iron-pages
selected="[[page]]"
attr-for-selected="name"
fallback-selection="view404"
role="main">
<my-view1 name="my-view1" form-loading="{{isLoading}}"
pic="{{pics}}" area-code="{{areaCode}}"></my-view1>
`
There is no reason the above would not work, assuming those property names were used in the listings-drawer element.
In Polymer 1.2, How do I use content in dom-repeat?.
//component
<dom-module id="data-stream">
<template>
...
<div class="data-stream-list">
<template is="dom-repeat" items="[[stream]]">
<div class="data-stream-item">
<content></content>
</div>
</template>
</div>
</template>
...
</dom-module>
//used as
<data-stream>
<!--// template for data stream item -->
<div class="custom-data-stream-item">[[item]]</div>
</data-stream>
Supposing i had a hypothetical stream of [one, two, three, four] this returns
...
<div class="data-stream-list">
<div class="data-stream-item">
<div class="custom-data-stream-item"></div>
</div>
<div class="data-stream-item"></div>
<div class="data-stream-item"></div>
<div class="data-stream-item"></div>
</div>
...
Implying the light DOM is stamped at least once but not repeated. Neither does there seem to be any binding. Not as expected.
That is just not supported. If you have several <content> elements without a selector, all children will be projected to the first <content> element.
If you add a select="someSelector" where someSelector is different for each <content> element and matches with a child each then it might work (not sure if dynamically added <content> elements are supported at all).
Polymer: 1.0.3
More routing: 1.0.0
Having some issues with Polymer "more-routing". Those are -
1) Get this log on console -
[dom-bind::_annotatedComputationEffect]: compute method `urlFor` not defined
2) First level routing works (even though I get those error/warning messages). But second level routing (i mean nested routing) does not work. On "users" page pressing the name doesn't take me to "user-info" page. In fact the name does not appear as a link, it appears as a text. Here is my code -
My "routing.html"--
<link rel="import" href="../bower_components/more-routing/more-routing.html">
<more-routing-config driver="hash"></more-routing-config>
<more-route name="home" path="/"></more-route>
<more-route name="users" path="/users">
<more-route name="user-info" path="/:name"></more-route>
</more-route>
<more-route name="contact" path="/contact"></more-route>
My "index.html" ---
<more-route-selector>
<paper-menu class="list" on-iron-select="onMenuSelect">
<a route="home" href="{{urlFor('home')}}">
<iron-icon icon="home"></iron-icon>
<span>Home</span>
</a>
<a route="users" href="{{urlFor('users')}}">
<iron-icon icon="info"></iron-icon>
<span>Users</span>
</a>
<a route="contact" href="{{urlFor('contact')}}">
<iron-icon icon="mail"></iron-icon>
<span>Contact</span>
</a>
</paper-menu>
</more-route-selector>
<more-route-selector selectedParams="{{params}}">
<iron-pages>
<section route="home">
<paper-material elevation="1">
<bortini-home></bortini-home>
</paper-material>
</section>
<section route="users">
<paper-material elevation="1">
<h2 class="paper-font-display2">Users</h2>
<p>This is the users section</p>
Rob
</paper-material>
</section>
<section route="user-info">
<paper-material elevation="1">
<h2 class="paper-font-display2">
User:<span>{{params.name}}</span>
</h2>
<div>This is <span>{{params.name}}</span>'s section</div>
</paper-material>
</section>
<section route="contact">
<paper-material elevation="1">
<h2 class="paper-font-display2">Contact</h2>
<p>This is the contact section</p>
</paper-material>
</section>
</iron-pages>
</more-route-selector>
With 1.0 (perhaps earlier), Polymer stopped supporting expressions inside data-bindings (Migration Guide - Data binding). Thankfully, you can still call a function in a binding (called a "computed binding").
From what I can tell, the urlFor() method must be slightly too complex to work as a computed binding (the params object isn't a dependent property). I was able to make it work by wrapping urlFor() in a simpler function - one that works as a computed binding - something like this:
<more-routing-config driver="path"></more-routing-config>
<more-route name="users" path="/users">
<more-route name="user-info" path="/:name"></more-route>
</more-route>
<template is="dom-bind">
Rob
</template>
<script>
var template = document.querySelector('template');
template.makeUrl = function(route, name) {
return MoreRouting.urlFor(route, {name:name});
};
</script>
You can also pass variables in your computed binding, as long as they're dependent properties, like the item in a repeating template
<template is="dom-bind">
<template is="dom-repeat" items="{{users}}">
{{item.name}}
</template>
</template>
<script>
var template = document.querySelector('template');
template.makeUrl = function(route, user) {
return MoreRouting.urlFor(route, {name:user.name});
};
</script>