core

core-icon-buttoncore-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-toolbaris 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 class on the core-toolbar. This will make the toolbar 3x the normal height.

<core-toolbar class="tall">


</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-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.



<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.


<div id="progressBar" class="bottom fit"></div>

</core-toolbar>

core-toolbar adapts to mobile/narrow layout when there is a core-narrow class set on itself or any of its ancestors.

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-buttoncore-menu-button works together with a button and core-dropdown to implement an button that displays a drop-down when tapped on.

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-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>

core-dropdown 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..

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'

core

Documents