You are on page 1of 7

core-icon-button

core-icon-button

is an icon with button behaviors.

<core-icon-button src="star.png"></core-icon-button>
core-icon-button

includes a default icon set. Use icon to specify which icon from the

icon set to use.


<core-icon-button icon="menu"></core-icon-button>

See core-iconset for more information about how to use a custom icon set.

Attributes
Src <string>default: ''

The URL of an image for the icon. Should not use icon property if you are using this
property.
Active <boolean>default: false

If true, border is placed around the button to indicate it's active state.
Icon <string>default: ''

Specifies the icon name or index in the set of icons available in the icon set. Should not
use src property if you are using this property.

core-toolbar
is a horizontal bar containing items that can be used for label, navigation, search and
actions. The items place inside the core-toolbar are projected into a horizontal center
layout container inside of core-toolbar's Shadow DOM. You can use flex attributes to
control the items' sizing.
Example:

<core-toolbar>
<core-icon-button icon="menu" on-tap="{{menuAction}}"></core-icon-button>
<div flex>Title</div>
<core-icon-button icon="more" on-tap="{{moreAction}}"></core-icon-button>
</core-toolbar>
core-toolbar has a standard height, but can made be taller by setting tall
the core-toolbar. This will make the toolbar 3x the normal height.

class on

<core-toolbar class="tall">
<core-icon-button icon="menu"></core-icon-button>
</core-toolbar>

Apply medium-tall class to make the toolbar medium tall. This will make the toolbar 2x
the normal height.
<core-toolbar class="medium-tall">
<core-icon-button icon="menu"></core-icon-button>
</core-toolbar>

When tall, items can pin to either the top (default), middle or bottom. Use middle class
for middle content and bottom class for bottom content.
<core-toolbar class="tall">
<core-icon-button icon="menu"></core-icon-button>
<div class="middle indent">Middle Title</div>
<div class="bottom indent">Bottom Title</div>

</core-toolbar>

For medium-tall toolbar, the middle and bottom contents overlap and are pinned to the
bottom. ButmiddleJustify and bottomJustify attributes are still honored separately.
To make an element completely fit at the bottom of the toolbar, use fit along
with bottom.
<core-toolbar class="tall">
<div id="progressBar" class="bottom fit"></div>
</core-toolbar>

adapts to mobile/narrow layout when there is a core-narrow class set on


itself or any of its ancestors.
core-toolbar

Attributes
Justify <string>default: ''

Controls how the items are aligned horizontally. Options


are start, center,end, between and around.
middleJustify <string>default: ''

Controls how the items are aligned horizontally when they are placed in the middle.
Options are start, center, end, between and around.
bottomJustify <string>default: ''

Controls how the items are aligned horizontally when they are placed at the bottom.
Options are start, center, end, between and around.

core-menu-button
works together with a button and core-dropdown to implement an
button that displays a drop-down when tapped on.
core-menu-button

The child element with the class dropdown will be used as the drop-down menu. It
should be a core-dropdown or other overlay element.

Example:
<core-menu-button>
<core-icon-button icon="menu"></core-icon-button>
<core-dropdown class="dropdown" layered>
<core-menu>
<core-item>Share</core-item>
<core-item>Settings</core-item>
<core-item>Help</core-item>
</core-menu>
</core-dropdown>
</core-menu-button>

is an element that is initially hidden and is positioned relatively to


another element, usually the element that triggers the dropdown. The dropdown and the
triggering element should be children of the same offsetParent, e.g. the
same <div> with position: relative. It can be used to implement dropdown menus,
menu buttons, etc..
core-dropdown

Example:
<template is="auto-binding">
<div relative>
<core-icon-button id="trigger" icon="menu"></core-icon-button>
<core-dropdown relatedTarget="{{$.trigger}}">
<core-menu>
<core-item>Cut</core-item>

<core-item>Copy</core-item>
<core-item>Paste</core-item>
</core-menu>
</core-dropdown>
</div>
</template>

Positioning
By default, the dropdown is absolutely positioned on top of the relatedTarget with the
top and left edges aligned. The halign and valign properties controls the various
alignments. The size of the dropdown is automatically restrained such that it is entirely
visible on the screen. Use the margin
If you need more control over the dropdown's position, use CSS.
The halign and valign properties are ignored if the dropdown is positioned with CSS.
Example:
<style>
/* manually position the dropdown below the trigger */
core-dropdown {
position: absolute;
top: 38px;
left: 0;
}
</style>

<template is="auto-binding">
<div relative>
<core-icon-button id="trigger" icon="menu"></core-icon-button>
<core-dropdown relatedTarget="{{$.trigger}}">
<core-menu>
<core-item>Cut</core-item>
<core-item>Copy</core-item>
<core-item>Paste</core-item>
</core-menu>
</core-dropdown>
</div>
</template>

The

layered

property

Sometimes you may need to render the dropdown in a separate layer. For example, it
may be nested inside an element that needs to be overflow: hidden, or its parent may be
overlapped by elements above it in stacking order.
The layered property will place the dropdown in a separate layer to ensure it appears on
top of everything else. Note that this implies the dropdown will not scroll with its
container.

Attributes
relatedTarget
<Node>

The element associated with this dropdown, usually the element that triggers the menu.
If unset, this property will default to the target's parent node or shadow host.

halign
<String>default: 'left'

The horizontal alignment of the popup relative to relatedTarget. leftmeans the left
edges are aligned together. right means the right edges are aligned together.
Accepted values: 'left', 'right'
valign
<String>default: 'top'

The vertical alignment of the popup relative to relatedTarget. top means the top edges
are aligned together. bottom means the bottom edges are aligned together.
Accepted values: 'top', 'bottom'

You might also like