Layout elements
The core-elements and paper-elements collections include a number of elements that can be used to structure your app’s layout. These include:
-
<core-header-panel>
. A simple container with a header section and content section. The header can either stay in place or scroll with the content. -
<core-toolbar>
. Can be used for an app bar or a toolbar on a smaller UI component, such as a card. The toolbar can serve as a container for controls, such as tabs and buttons. -
<core-drawer-panel>
. A responsive container that combines a left- or right-side drawer panel for navigation or other options and a main content area. -
<core-scaffold>
. A quick responsive app layout that includes a navigation drawer, main app bar and content area (implemented using a core-drawer-panel, core-header-panel and core-toolbar.) The core-scaffold element is a quick way to structure an app’s UI.
App Bars and Toolbars
<core-header-panel>
is often combined with a
<core-toolbar>
. When you use a <core-toolbar>
, the panel automatically places it in the header area. You can also use any type of element in your header by adding the core-header
class to its class list.
Other elements placed in the core-header-panel end up in the content area.
<core-header-panel>
is position: relative
, and always needs to have a height set on it explicitly. An easy way to go about this is to use layout attributes. Add fullbleed
, vertical
, and layout
attributes to the <body>
and then add a flex
attribute to the <core-header-panel>
itself.
The following example app uses a <core-header-panel>
as its top-level layout:
Use the following code to create the header panel app.
<!-- use fullbleed attribute to specify
the body should fill the viewport -->
<body fullbleed vertical layout unresolved>
<core-header-panel flex>
<core-toolbar id="mainheader">
<paper-icon-button id="navicon"
icon="arrow-back"></paper-icon-button>
<span flex>Title</span>
<paper-icon-button id="searchbutton"
icon="search"></paper-icon-button>
</core-toolbar>
<p>Sample content.</p>
<p>Sample content.</p>
</core-header-panel>
</body>
body {
font-family: sans-serif;
}
core-header-panel {
background: white;
}
core-toolbar {
background-color: #03A9F4;
}
p {
margin: 20px;
padding: 80px 20px;
border-radius: 20px;
background-color: #eee;
}
<script
src="../../components/webcomponentsjs/webcomponents.js">
</script>
<link rel="import"
href="../../components/core-toolbar/core-toolbar.html">
<link rel="import"
href="../../components/core-header-panel/core-header-panel.html">
<link rel="import"
href="../../components/core-icons/core-icons.html">
<link rel="import"
href="../../components/paper-icon-button/paper-icon-button.html">
The following example uses a plain <div>
as the header element, using the core-header
class:
<core-header-panel flex>
<div class="core-header">
My App
</div>
<div>
My app content.
</div>
</core-header-panel>
Setting the mode
attribute on the header panel controls how the header area and content area interact. There are several modes:
standard
. The header appears at a higher level than the content area, with a drop shadow. Content scrolls under the header.seamed
. The header appears at the same level as the content area, with a seam between the two (no drop shadow). Content scrolls under the header.waterfall
. The header initially presents as seamed. When content scrolls under the header, the header raises up and casts a drop shadow (as instandard
mode).waterfall-tall
. Like waterfall, except that the toolbar starts off tall (3x standard height) and condenses to a standard-height toolbar as the user scrolls.scroll
. The header is seamed with the content and scrolls with the content.cover
. The content scrolls over the header. This mode is designed to be used with narrow content (for example cards).
See the <core-header-panel>
demo for examples of all of the modes in action.
In addition, you manually choose from several sizes of toolbar by adding one of the following classes to the core-toolbar’s class list:
- medium-tall (2x normal height)
- tall (3x normal height)
Taller toolbars are useful when you want to create an app bar with tabs, for example:
Use the following code to create the toolbar shown above:
<core-toolbar class="medium-tall">
<paper-icon-button id="navicon"
icon="menu"></paper-icon-button>
<span flex>Title</span>
<paper-icon-button id="morebutton"
icon="more-vert"></paper-icon-button>
<paper-tabs class="bottom fit" selected="0">
<paper-tab>ONE</paper-tab>
<paper-tab>TWO</paper-tab>
</paper-tabs>
</core-toolbar>
body {
font-family: sans-serif;
background-color: #eee;
}
core-toolbar {
background-color: #03A9F4;
}
<script
src="../../components/webcomponentsjs/webcomponents.js">
</script>
<link rel="import"
href="../../components/core-toolbar/core-toolbar.html">
<link rel="import"
href="../../components/core-header-panel/core-header-panel.html">
<link rel="import"
href="../../components/core-icons/core-icons.html">
<link rel="import"
href="../../components/paper-icon-button/paper-icon-button.html">
<link rel="import"
href="../../components/paper-tabs/paper-tabs.html">
If the core-header-panel is in waterfall-tall
mode, it controls the height of the toolbar automatically, so you shouldn’t set medium-tall
or tall
on the toolbar yourself.
Tip: For fancy scrolling effects where the toolbar animates between tall and condensed states, you can use <core-scroll-header-panel>
. See the demos here. You may need to look at the source for the demos to implement the more complicated effects.
Responsive side nav
The <core-drawer-panel>
element creates a left or right side nav area alongside
the main content area. On narrow screens, the nav area acts as a drawer that can
be hidden or revealed by calling the drawer panel’s togglePanel
method.
Any children with the drawer
attribute set are placed in the navigation area.
Any children with the main
attribute are placed in the main panel.
You can nest <core-header-panel>
and <core-toolbar>
elements inside a
<core-drawer-panel>
to create the layout for the content area and navigation
drawer, as shown in the following example:
Use the following code to create the drawer panel app:
<core-drawer-panel id="drawerPanel">
<core-header-panel drawer>
<core-toolbar id="navheader">
<span>Menu</span>
</core-toolbar>
<core-menu>
<core-item label="One"></core-item>
<core-item label="Two"></core-item>
</core-menu>
</core-header-panel>
<core-header-panel main>
<core-toolbar id="mainheader">
<paper-icon-button
id="navicon" icon="menu"></paper-icon-button>
<span flex>Title</span>
</core-toolbar>
<div class="content">
If drawer is hidden, press button to display drawer.
</div>
</core-header-panel>
</core-drawer-panel>
document.addEventListener('polymer-ready', function() {
var navicon = document.getElementById('navicon');
var drawerPanel = document.getElementById('drawerPanel');
navicon.addEventListener('click', function() {
drawerPanel.togglePanel();
});
});
body {
font-family: sans-serif;
}
core-header-panel {
background: white;
}
core-toolbar {
background-color: #03A9F4;
}
#navheader {
background-color: #56BA89;
}
.content {
padding: 20px;
}
/* drawer is always visible on a wide screen
so menu button isn't required */
core-drawer-panel:not([narrow]) #navicon {
display: none;
}
<script
src="../../components/webcomponentsjs/webcomponents.js">
</script>
<link rel="import"
href="../../components/core-toolbar/core-toolbar.html">
<link rel="import"
href="../../components/core-menu/core-menu.html">
<link rel="import"
href="../../components/core-item/core-item.html">
<link rel="import"
href="../../components/core-header-panel/core-header-panel.html">
<link rel="import"
href="../../components/core-drawer-panel/core-drawer-panel.html">
<link rel="import"
href="../../components/core-icons/core-icons.html">
<link rel="import"
href="../../components/paper-icon-button/paper-icon-button.html">
Note: On wide screens, the drawer is always open and the menu button is hidden. On narrow screens, you can press the button or swipe from the left to show the drawer. On desktop, resize the browser window to see the different modes.
Side nav with <core-scaffold>
The <core-scaffold>
element
assembles a commonly-used combination of components:
a <core-drawer-panel>
with a <core-header-panel>
and <core-toolbar>
for the
main content area. It also includes a button to display the navigation drawer.
The following example produces the same basic layout as the drawer panel example above:
Use the following code to create the scaffold app:
<core-scaffold>
<core-header-panel navigation flex>
<core-toolbar id="navheader">
<span>Menu</span>
</core-toolbar>
<core-menu>
<core-item label="One"></core-item>
<core-item label="Two"></core-item>
</core-menu>
</core-header-panel>
<span tool>Title</span>
<div class="content">
If drawer is hidden, press button to display drawer.
</div>
</core-scaffold>
body {
font-family: sans-serif;
}
#navheader {
background-color: #56BA89;
}
.content {
padding: 20px;
}
<script
src="../../components/webcomponentsjs/webcomponents.js">
</script>
<link rel="import"
href="../../components/core-toolbar/core-toolbar.html">
<link rel="import"
href="../../components/core-menu/core-menu.html">
<link rel="import"
href="../../components/core-item/core-item.html">
<link rel="import"
href="../../components/core-header-panel/core-header-panel.html">
<link rel="import"
href="../../components/core-drawer-panel/core-drawer-panel.html">
<link rel="import"
href="../../components/core-scaffold/core-scaffold.html">