I'm currently using core-scaffold for my basic app structure. However, i want to have a different toolbar for every page. I want to do something similar to this:
<core-scaffold>
<core-header-panel navigation flex mode="seamed">
<core-toolbar>
Veganolux
</core-toolbar>
<core-menu>
<paper-item icon="store" label="Restaurants" on-tap="{{showRestaurants}}"></paper-item>
<paper-item icon="settings" label="Settings" on-tap="{{showSettings}}"></paper-item>
<paper-item icon="info" label="About" on-click="{{showAbout}}"></paper-item>
</core-menu>
</core-header-panel>
<div tool>Restaurants</div>
<core-pages id="pages" selected="0">
<section id="pageRestaurants">
<div tool>Toolbar with buttons</div>
</section>
<section id="pageSettings">
<div tool>Toolbar without buttons</div>
</section>
<section id="pageAbout">
<div tool>Toolbar with other buttons</div>
</section>
</core-pages>
</core-scaffold>
This is however not possible, because the is not a direct child of core-scaffold. I know that I could add databinding to change the title, but it gets to complex if I add different buttons/etc. to the toolbar.
One option is to create an activePage variable that holds the currently selected page. Your on-tap event handlers would update the activePage variable. Then you could wrap sections of the core-header-panel in conditional templates like <template if="{{ activePage === 'restaurants' }}">.
The other option is to create multiple layout elements and wrap the page element in a layout like this http://erikringsmuth.github.io/app-router/#/layouts.
Related
I want to create a custom element that's going to work like an accordion container for other elements. I'm planning on using the Bootstrap 4 Collapse. I want to be able to place a variable number of other custom elements within it so using slots is not enough.
For example if I knew that there will be 3 elements placed in the accordion I would put three slots in accordion.html and then use it like this:
<accordion>
<first-custom-element slot="first-element"></first-custom-element>
<second-custom-element slot="second-element"></second-custom-element>
<third-custom-element slot="third-element"></third-custom-element>
</accordion>
The thing is, I don't know how many elements will need to placed inside the accordion because I want to make it more generic and reusable so I can use it in multiple pages in my application. What I want is a way to read everything placed inside the <accordion> tags and create slots for each one of these elements the fly. Is there such a functionality in Aurelia or should go for a custom implementation?
Split out the items from the overall accordion element, like this:
accordion.html
<template>
<div id="accordion" role="tablist" aria-multiselectable="true">
<slot></slot>
</div>
</template>
accordion-item.html
<template bindable="panelTitle, headingId, itemId">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="${headingId}">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#${itemId}" aria-expanded="true" aria-controls="${itemId}">
${panelTitle}
</a>
</h4>
</div>
<div id="${itemId}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="${headingId}">
<slot></slot>
</div>
</div>
</template>
Usage
<template>
<require from="accordian.html"></require>
<require from="accordian-item.html"></require>
<accordian>
<accordian-item panel-title="Panel 1 Title" heading-id="headingOne" item-id="collapseOne">
<accordian item 1 content>
</accordian-item>
<accordian-item panel-title="Panel 2 Title" heading-id="headingTwo" item-id="collapseTwo">
<accordian item 2 content>
</accordian-item>
</accordian>
</template>
If you need only one accordion, juste use one slotin your template:
<template>
<slot></slot>
</template>
Don't put slot property in your inside elements and the whole content will be inserted at the <slot> position.
<accordion>
<first-custom-element></first-custom-element>
<second-custom-element></second-custom-element>
<third-custom-element></third-custom-element>
...
</accordion>
For example, I have a route between multiple pages like login, home, contact etc. But under home I would like to create a data route for a drawer panel which would route to content within the home page. Or something like swipe-pages between tabs? Is this possible at all?
<paper-tabs selected="{{selectedPage}}">
<paper-tab>Page 0</paper-tab>
<paper-tab>Page 1</paper-tab>
<paper-tab>Page 2</paper-tab>
</paper-tabs>
<iron-pages attr-for-selected="data-route" selected="{{route}}">
<section data-route="home">
<paper-material elevation="1">
<swipe-pages attr-for-selected="data-route" selected="{{selectedPage}}">
<swipe-page layout vertical center center-justified>1</swipe-page>
<swipe-page layout vertical center center-justified>2</swipe-page>
<swipe-page layout vertical center center-justified>3</swipe-page>
</swipe-pages>
</paper-material>
</section>
Background
Here is the documentation for the <paper-tabs> element.
Here is an issue describing the lack of content in the demo examples.
The demo examples illustrate tab headers but omit tab content.
Question
Can someone please point to an example showing how <paper-tabs> can be used to control the display of content?
It's in the docs of the first link:
A common usage for paper-tabs is to use it along with iron-pages to switch between different views.
<paper-tabs selected="{{selected}}">
<paper-tab>Tab 1</paper-tab>
<paper-tab>Tab 2</paper-tab>
<paper-tab>Tab 3</paper-tab>
</paper-tabs>
<iron-pages selected="{{selected}}">
<div>Page 1</div>
<div>Page 2</div>
<div>Page 3</div>
</iron-pages>
I noticed there were no "selectbox" widgets within the Paper Elements section of Polymer documentation, nor did I see one in the Polymer GitHub repos. Also I don't recall seeing any specific guidance on the Material Design specifications as to how a selectbox should look or behave.
Are there proposals out there? Or specific plans to incorporate designs for selectboxes within material design / polymer paper elements?
I definitely understand that you can basically get the same functionality from checkboxes (multi) or radio buttons (single), but from an aesthetic perspective, depending on the specific application, I get the feeling it may be a good idea to have 'select' available as an option.
Perhaps one of these will fill your needs?
core-selector
<core-selector selected="0">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</core-selector>
core-dropdown
<core-dropdown selected="Financier" valueattr="label">
<core-item label="Croissant"></core-item>
<core-item label="Donut"></core-item>
<core-item label="Financier"></core-item>
<core-item label="Madeleine"></core-item>
</core-dropdown>
You can use the paper-dropdown-menu, for example:
<paper-dropdown-menu label="Favorite fruit" name="fruit">
<paper-dropdown class="dropdown">
<core-menu class="menu">
<paper-item>apples</paper-item>
<paper-item>oranges</paper-item>
<paper-item>pears</paper-item>
</core-menu>
</paper-dropdown>
</paper-dropdown-menu>
I'm trying to create a toggle menu with Polymer.
What I want is plain simple, when I click an item I want to display only the related div as the content.
I'm using the core-scalffold element which gives you a menu and a content layout.
Which should be the best approach to accomplish this using polymer components and events?
<core-scaffold>
<core-header-panel navigation flex>
<core-toolbar id="navheader">
</core-toolbar>
<core-menu>
<core-item label="Content 1"></core-item>
<core-item label="Content 2"></core-item>
</core-menu>
</core-header-panel>
<span tool>Title</span>
<div class="content1">
Hi there content1!
</div>
<div class="content2">
Hi there content2!
</div>
</core-scaffold>
The core-pages element provides a way of making selectable sections, so this is a good choice for the content divs. Then, since core-menu and the core-pages both have selected properties, it's easy to bind the two elements together. To use Polymer data-binding, we have to use a template. If we put the whole thing in an auto-binding template we get something like this:
<template is="auto-binding">
<core-scaffold>
<core-header-panel navigation flex>
<core-toolbar id="navheader">
</core-toolbar>
<core-menu selected="0" selectedIndex="{{selected}}">
<core-item label="Content 1"></core-item>
<core-item label="Content 2"></core-item>
</core-menu>
</core-header-panel>
<span tool>Title {{selected}}</span>
<core-pages selected="{{selected}}">
<div class="content1">
Hi there content1!
</div>
<div class="content2">
Hi there content2!
</div>
</core-pages>
</core-scaffold>
</template>
Note: I bound selectedIndex property of core-menu so I could use selected for setting the default.
http://jsbin.com/wivec/1/edit
If you really want a solution that uses events instead of binding, let me know.