All Downloads are FREE. Search and download functionalities are using the official Maven repository.

com.vaadin.polymer.paper.widget.PaperToolbar Maven / Gradle / Ivy

The newest version!
/*
 * This code was generated with Vaadin Web Component GWT API Generator, 
 * from paper-toolbar project by The Polymer Authors
 * that is licensed with http://polymer.github.io/LICENSE.txt license.
 */
package com.vaadin.polymer.paper.widget;

import com.vaadin.polymer.paper.*;

import com.vaadin.polymer.*;
import com.vaadin.polymer.elemental.*;
import com.vaadin.polymer.PolymerWidget;
import com.google.gwt.core.client.JsArray;
import com.google.gwt.event.shared.HandlerRegistration;
import com.google.gwt.core.client.JavaScriptObject;

/**
 * 

Material design: Toolbars

*

paper-toolbar is a horizontal bar containing items that can be used for
label, navigation, search and actions. The items placed inside the
paper-toolbar are projected into a class="horizontal center layout" container inside of
paper-toolbar‘s Shadow DOM. You can use flex attributes to control the items’
sizing.

*

Example:

*
<paper-toolbar>
 *   <paper-icon-button icon="menu" on-tap="menuAction"></paper-icon-button>
 *   <div class="title">Title</div>
 *   <paper-icon-button icon="more-vert" on-tap="moreAction"></paper-icon-button>
 * </paper-toolbar>
 * 
*

paper-toolbar has a standard height, but can made be taller by setting tall
class on the paper-toolbar. This will make the toolbar 3x the normal height.

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

Apply medium-tall class to make the toolbar medium tall. This will make the
toolbar 2x the normal height.

*
<paper-toolbar class="medium-tall">
 *   <paper-icon-button icon="menu"></paper-icon-button>
 * </paper-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.

*
<paper-toolbar class="tall">
 *   <paper-icon-button icon="menu"></paper-icon-button>
 *   <div class="middle title">Middle Title</div>
 *   <div class="bottom title">Bottom Title</div>
 * </paper-toolbar>
 * 
*

For medium-tall toolbar, the middle and bottom contents overlap and are
pinned to the bottom. But middleJustify and bottomJustify attributes are
still honored separately.

*

To make an element completely fit at the bottom of the toolbar, use fit along
with bottom.

*
<paper-toolbar class="tall">
 *   <div id="progressBar" class="bottom fit"></div>
 * </paper-toolbar>
 * 
*

When inside a paper-header-panel element with mode="waterfall-tall",
the class .animate is toggled to animate the height change in the toolbar.

*

Styling

*

The following custom properties and mixins are available for styling:

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Custom propertyDescriptionDefault
--paper-toolbar-titleMixin applied to the title of the toolbar{}
--paper-toolbar-backgroundToolbar background color--primary-color
--paper-toolbar-colorToolbar foreground color--dark-theme-text-color
--paper-toolbar-heightCustom height for toolbar64px
--paper-toolbar-sm-heightCustom height for small screen toolbar56px
--paper-toolbarMixin applied to the toolbar{}
--paper-toolbar-contentMixin applied to the content section of the toolbar{}
--paper-toolbar-mediumMixin applied to medium height toolbar{}
--paper-toolbar-tallMixin applied to tall height toolbar{}
--paper-toolbar-transitionTransition applied to the .animate classheight 0.18s ease-in
*

Accessibility

*

<paper-toolbar> has role="toolbar" by default. Any elements with the class title will
be used as the label of the toolbar via aria-labelledby.

*/ public class PaperToolbar extends PolymerWidget { /** * Default Constructor. */ public PaperToolbar() { this(""); } /** * Constructor used by UIBinder to create widgets with content. */ public PaperToolbar(String html) { super(PaperToolbarElement.TAG, PaperToolbarElement.SRC, html); } /** * Gets a handle to the Polymer object's underlying DOM element. */ public PaperToolbarElement getPolymerElement() { return (PaperToolbarElement) getElement(); } /** *

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

* * JavaScript Info: * @property bottomJustify * @type String * */ public String getBottomJustify() { return getPolymerElement().getBottomJustify(); } /** *

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

* * JavaScript Info: * @property bottomJustify * @type String * */ public void setBottomJustify(String value) { getPolymerElement().setBottomJustify(value); } /** *

Controls how the items are aligned horizontally.
Options are start, center, end, justified and around.

* * JavaScript Info: * @property justify * @type String * */ public String getJustify() { return getPolymerElement().getJustify(); } /** *

Controls how the items are aligned horizontally.
Options are start, center, end, justified and around.

* * JavaScript Info: * @property justify * @type String * */ public void setJustify(String value) { getPolymerElement().setJustify(value); } /** *

Controls how the items are aligned horizontally when they are placed
in the middle.
Options are start, center, end, justified and around.

* * JavaScript Info: * @property middleJustify * @type String * */ public String getMiddleJustify() { return getPolymerElement().getMiddleJustify(); } /** *

Controls how the items are aligned horizontally when they are placed
in the middle.
Options are start, center, end, justified and around.

* * JavaScript Info: * @property middleJustify * @type String * */ public void setMiddleJustify(String value) { getPolymerElement().setMiddleJustify(value); } }




© 2015 - 2024 Weber Informatics LLC | Privacy Policy