com.vaadin.polymer.paper.widget.PaperHeaderPanel Maven / Gradle / Ivy
/*
* This code was generated with Vaadin Web Component GWT API Generator,
* from paper-header-panel 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.paper.widget.event.ContentScrollEvent;
import com.vaadin.polymer.paper.widget.event.ContentScrollEventHandler;
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;
/**
* paper-header-panel contains a header section and a content panel section.
* Important: The paper-header-panel will not display if its parent does not have a height.
* Using layout classes, you can make the paper-header-panel fill the screen
* <body class="fullbleed layout vertical">
* <paper-header-panel class="flex">
* <paper-toolbar>
* <div>Hello World!</div>
* </paper-toolbar>
* </paper-header-panel>
* </body>
*
*
*
Special support is provided for scrolling modes when one uses a paper-toolbar or equivalent for the
header section.
* Example:
* <paper-header-panel>
* <paper-toolbar>Header</paper-toolbar>
* <div>Content goes here...</div>
* </paper-header-panel>
*
*
*
If you want to use other than paper-toolbar for the header, add paper-header class to that
element.
* Example:
* <paper-header-panel>
* <div class="paper-header">Header</div>
* <div>Content goes here...</div>
* </paper-header-panel>
*
*
*
To have the content fit to the main area, use the fit class.
* <paper-header-panel>
* <div class="paper-header">standard</div>
* <div class="fit">content fits 100% below the header</div>
* </paper-header-panel>
*
*
*
Modes
* Controls header and scrolling behavior. Options are standard, seamed, waterfall, waterfall-tall, scroll and
cover. Default is standard.
*
*
*
* Mode
* Description
*
*
*
*
* standardThe header is a step above the panel. The header will consume the panel at the point of entry, preventing it from passing through to the opposite side.
*
*
* seamedThe header is presented as seamed with the panel.
*
*
* waterfallSimilar to standard mode, but header is initially presented as seamed with panel, but then separates to form the step.
*
*
* waterfall-tallThe header is initially taller (tall class is added to the header). As the user scrolls, the header separates (forming an edge) while condensing (tall class is removed from the header).
*
*
* scrollThe header keeps its seam with the panel, and is pushed off screen.
*
*
* coverThe panel covers the whole paper-header-panel including the header. This allows user to style the panel in such a way that the panel is partially covering the header.
*
*
*
* Example:
* <paper-header-panel mode="waterfall">
* <div class="paper-header">standard</div>
* <div class="content fit">content fits 100% below the header</div>
* </paper-header-panel>
*
*
*
*
Styling
* To change the shadow that shows up underneath the header:
* paper-header-panel {
* --paper-header-panel-shadow: {
* height: 6px;
* bottom: -6px;
* box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4);
* };
* }
*
*
*
To change the panel container:
* paper-header-panel {
* --paper-header-panel-container: {
* border: 1px solid gray;
* };
*
*
*
To change the panel container in different modes:
* paper-header-panel {
* --paper-header-panel-standard-container: {
* border: 1px solid gray;
* };
*
* --paper-header-panel-seamed-container: {
* border: 1px solid gray;
* };
*
* --paper-header-panel-waterfall-container: {
* border: 1px solid gray;
* };
*
* --paper-header-panel-waterfall-tall-container: {
* border: 1px solid gray;
* };
*
* --paper-header-panel-scroll-container: {
* border: 1px solid gray;
* };
*
* --paper-header-panel-cover-container: {
* border: 1px solid gray;
* };
* }
*
*
*
The following custom properties and mixins are available for styling:
*
*
*
* Custom property
* Description
* Default
*
*
*
*
* --paper-header-panelMixin applied to the element
* {}
*
* --paper-header-panel-bodyMixin applied to the element’s body (i.e. everything below the toolbar)
* {}
*
* --paper-header-panel-containerMixin applied to the container in any mode
* {}
*
* --paper-header-panel-scroll-containerMixin applied to the container when in scroll mode
* {}
*
* --paper-header-panel-cover-containerMixin applied to the container when in cover mode
* {}
*
* --paper-header-panel-standard-containerMixin applied to the container when in standard mode
* {}
*
* --paper-header-panel-seamed-containerMixin applied to the container when in seamed mode
* {}
*
* --paper-header-panel-waterfall-containerMixin applied to the container when in waterfall mode
* {}
*
* --paper-header-panel-waterfall-tall-containerMixin applied to the container when in tall waterfall mode
* {}
*
* --paper-header-panel-shadowMixin applied to the waterfall shadow
* {}
*
*
*/
public class PaperHeaderPanel extends PolymerWidget {
/**
* Default Constructor.
*/
public PaperHeaderPanel() {
this("");
}
/**
* Constructor used by UIBinder to create widgets with content.
*/
public PaperHeaderPanel(String html) {
super(PaperHeaderPanelElement.TAG, PaperHeaderPanelElement.SRC, html);
}
/**
* Gets a handle to the Polymer object's underlying DOM element.
*/
public PaperHeaderPanelElement getPolymerElement() {
return (PaperHeaderPanelElement) getElement();
}
/**
* If true, the scroller is at the top
*
* JavaScript Info:
* @property atTop
* @type Boolean
*
*/
public boolean getAtTop() {
return getPolymerElement().getAtTop();
}
/**
* If true, the scroller is at the top
*
* JavaScript Info:
* @property atTop
* @type Boolean
*
*/
public void setAtTop(boolean value) {
getPolymerElement().setAtTop(value);
}
/**
* If true, the drop-shadow is always shown no matter what mode is set to.
*
* JavaScript Info:
* @property shadow
* @type Boolean
*
*/
public boolean getShadow() {
return getPolymerElement().getShadow();
}
/**
* If true, the drop-shadow is always shown no matter what mode is set to.
*
* JavaScript Info:
* @property shadow
* @type Boolean
*
*/
public void setShadow(boolean value) {
getPolymerElement().setShadow(value);
}
/**
* Controls header and scrolling behavior. Options are
standard, seamed, waterfall, waterfall-tall, scroll and
cover. Default is standard.
* standard: The header is a step above the panel. The header will consume the
panel at the point of entry, preventing it from passing through to the
opposite side.
* seamed: The header is presented as seamed with the panel.
* waterfall: Similar to standard mode, but header is initially presented as
seamed with panel, but then separates to form the step.
* waterfall-tall: The header is initially taller (tall class is added to
the header). As the user scrolls, the header separates (forming an edge)
while condensing (tall class is removed from the header).
* scroll: The header keeps its seam with the panel, and is pushed off screen.
* cover: The panel covers the whole paper-header-panel including the
header. This allows user to style the panel in such a way that the panel is
partially covering the header.
* <paper-header-panel mode="cover">
* <paper-toolbar class="tall">
* <paper-icon-button icon="menu"></paper-icon-button>
* </paper-toolbar>
* <div class="content"></div>
* </paper-header-panel>
*
*
*
* JavaScript Info:
* @property mode
* @type String
*
*/
public String getMode() {
return getPolymerElement().getMode();
}
/**
* Controls header and scrolling behavior. Options are
standard, seamed, waterfall, waterfall-tall, scroll and
cover. Default is standard.
* standard: The header is a step above the panel. The header will consume the
panel at the point of entry, preventing it from passing through to the
opposite side.
* seamed: The header is presented as seamed with the panel.
* waterfall: Similar to standard mode, but header is initially presented as
seamed with panel, but then separates to form the step.
* waterfall-tall: The header is initially taller (tall class is added to
the header). As the user scrolls, the header separates (forming an edge)
while condensing (tall class is removed from the header).
* scroll: The header keeps its seam with the panel, and is pushed off screen.
* cover: The panel covers the whole paper-header-panel including the
header. This allows user to style the panel in such a way that the panel is
partially covering the header.
* <paper-header-panel mode="cover">
* <paper-toolbar class="tall">
* <paper-icon-button icon="menu"></paper-icon-button>
* </paper-toolbar>
* <div class="content"></div>
* </paper-header-panel>
*
*
*
* JavaScript Info:
* @property mode
* @type String
*
*/
public void setMode(String value) {
getPolymerElement().setMode(value);
}
/**
* The class used in waterfall-tall mode. Change this if the header
accepts a different class for toggling height, e.g. “medium-tall”
*
* JavaScript Info:
* @property tallClass
* @type String
*
*/
public String getTallClass() {
return getPolymerElement().getTallClass();
}
/**
* The class used in waterfall-tall mode. Change this if the header
accepts a different class for toggling height, e.g. “medium-tall”
*
* JavaScript Info:
* @property tallClass
* @type String
*
*/
public void setTallClass(String value) {
getPolymerElement().setTallClass(value);
}
/**
* Fired when the content has been scrolled. event.detail.target returns
the scrollable element which you can use to access scroll info such as
scrollTop.
* <paper-header-panel on-content-scroll="scrollHandler">
* ...
* </paper-header-panel>
*
*
* scrollHandler: function(event) {
* var scroller = event.detail.target;
* console.log(scroller.scrollTop);
* }
*
*
*
*
* JavaScript Info:
* @event content-scroll
*/
public HandlerRegistration addContentScrollHandler(ContentScrollEventHandler handler) {
return addDomHandler(handler, ContentScrollEvent.TYPE);
}
}