com.vaadin.polymer.paper.element.PaperScrollHeaderPanelElement Maven / Gradle / Ivy
/*
* This code was generated with Vaadin Web Component GWT API Generator,
* from paper-scroll-header-panel project by The Polymer Authors
* that is licensed with http://polymer.github.io/LICENSE.txt license.
*/
package com.vaadin.polymer.paper.element;
import com.vaadin.polymer.elemental.*;
import com.google.gwt.core.client.JavaScriptObject;
import com.google.gwt.core.client.JsArray;
import com.google.gwt.core.client.js.JsProperty;
import com.google.gwt.core.client.js.JsType;
/**
* paper-scroll-header-panel contains a header section and a content section. The
header is initially on the top part of the view but it scrolls away with the
rest of the scrollable content. Upon scrolling slightly up at any point, the
header scrolls back into view. This saves screen space and allows users to
access important controls by easily moving them back to the view.
* Important: The paper-scroll-header-panel will not display if its parent does not have a height.
* Using layout classes or custom properties, you can easily make the paper-scroll-header-panel fill the screen
* <body class="fullbleed layout vertical">
* <paper-scroll-header-panel class="flex">
* <paper-toolbar>
* <div>Hello World!</div>
* </paper-toolbar>
* </paper-scroll-header-panel>
* </body>
*
*
*
or, if you would prefer to do it in CSS, just give html, body, and paper-scroll-header-panel a height of 100%:
* html, body {
* height: 100%;
* margin: 0;
* }
* paper-scroll-header-panel {
* height: 100%;
* }
*
*
*
paper-scroll-header-panel works well with paper-toolbar but can use any element
that represents a header by adding a paper-header class to it.
* <paper-scroll-header-panel>
* <paper-toolbar>Header</paper-toolbar>
* <div>Content goes here...</div>
* </paper-scroll-header-panel>
*
*
*
Styling scroll-header-panel:
* To change background for toolbar when it is at its full size:
* paper-scroll-header-panel {
* --paper-scroll-header-panel-full-header: {
* background-color: red;
* };
* }
*
*
*
To change the background for toolbar when it is condensed:
* paper-scroll-header-panel {
* --paper-scroll-header-panel-condensed-header: {
* background-color: #f4b400;
* };
* }
*
*
*
*/
@JsType
public interface PaperScrollHeaderPanelElement extends HTMLElement {
public static final String TAG = "paper-scroll-header-panel";
public static final String SRC = "paper-scroll-header-panel/paper-scroll-header-panel.html";
/**
* The header’s state when it’s condensed.
*
* JavaScript Info:
* @property HEADER_STATE_CONDENSED
* @type number
*
*/
@JsProperty double getHEADER_STATE_CONDENSED();
/**
* The header’s state when it’s condensed.
*
* JavaScript Info:
* @property HEADER_STATE_CONDENSED
* @type number
*
*/
@JsProperty void setHEADER_STATE_CONDENSED(double value);
/**
* The header’s initial state
*
* JavaScript Info:
* @property HEADER_STATE_EXPANDED
* @type number
*
*/
@JsProperty double getHEADER_STATE_EXPANDED();
/**
* The header’s initial state
*
* JavaScript Info:
* @property HEADER_STATE_EXPANDED
* @type number
*
*/
@JsProperty void setHEADER_STATE_EXPANDED(double value);
/**
* The header’s state when it’s hidden.
*
* JavaScript Info:
* @property HEADER_STATE_HIDDEN
* @type number
*
*/
@JsProperty double getHEADER_STATE_HIDDEN();
/**
* The header’s state when it’s hidden.
*
* JavaScript Info:
* @property HEADER_STATE_HIDDEN
* @type number
*
*/
@JsProperty void setHEADER_STATE_HIDDEN(double value);
/**
* The header’s state when its progress is somewhere between
the hidden and condensed state.
*
* JavaScript Info:
* @property HEADER_STATE_INTERPOLATED
* @type number
*
*/
@JsProperty double getHEADER_STATE_INTERPOLATED();
/**
* The header’s state when its progress is somewhere between
the hidden and condensed state.
*
* JavaScript Info:
* @property HEADER_STATE_INTERPOLATED
* @type number
*
*/
@JsProperty void setHEADER_STATE_INTERPOLATED(double value);
/**
* Condense the header.
*
* JavaScript Info:
* @method condense
* @param {boolean} smooth
*
*/
void condense(boolean smooth);
/**
* The height of the header when it is condensed.
* By default, condensedHeaderHeight is 1/3 of headerHeight unless
this is specified.
*
* JavaScript Info:
* @property condensedHeaderHeight
* @type Number
*
*/
@JsProperty double getCondensedHeaderHeight();
/**
* The height of the header when it is condensed.
* By default, condensedHeaderHeight is 1/3 of headerHeight unless
this is specified.
*
* JavaScript Info:
* @property condensedHeaderHeight
* @type Number
*
*/
@JsProperty void setCondensedHeaderHeight(double value);
/**
* If true, the header’s height will condense to condensedHeaderHeight
as the user scrolls down from the top of the content area.
*
* JavaScript Info:
* @property condenses
* @type Boolean
*
*/
@JsProperty boolean getCondenses();
/**
* If true, the header’s height will condense to condensedHeaderHeight
as the user scrolls down from the top of the content area.
*
* JavaScript Info:
* @property condenses
* @type Boolean
*
*/
@JsProperty void setCondenses(boolean value);
/**
* Returns the content element.
*
* JavaScript Info:
* @method content
*
*/
void content();
/**
* If true, the header is fixed to the top and never moves away.
*
* JavaScript Info:
* @property fixed
* @type Boolean
*
*/
@JsProperty boolean getFixed();
/**
* If true, the header is fixed to the top and never moves away.
*
* JavaScript Info:
* @property fixed
* @type Boolean
*
*/
@JsProperty void setFixed(boolean value);
/**
* Returns the header element.
*
* JavaScript Info:
* @method header
*
*/
void header();
/**
* The height of the header when it is at its full size.
* By default, the height will be measured when it is ready. If the height
changes later the user needs to either set this value to reflect the
new height or invoke measureHeaderHeight().
*
* JavaScript Info:
* @property headerHeight
* @type Number
*
*/
@JsProperty double getHeaderHeight();
/**
* The height of the header when it is at its full size.
* By default, the height will be measured when it is ready. If the height
changes later the user needs to either set this value to reflect the
new height or invoke measureHeaderHeight().
*
* JavaScript Info:
* @property headerHeight
* @type Number
*
*/
@JsProperty void setHeaderHeight(double value);
/**
* The state of the header. The initial value is HEADER_STATE_EXPANDED.
Depending on the configuration and the scrollTop value,
the header state could change to
HEADER_STATE_HIDDEN, HEADER_STATE_CONDENSED and HEADER_STATE_INTERPOLATED
*
* JavaScript Info:
* @property headerState
* @type Number
*
*/
@JsProperty double getHeaderState();
/**
* The state of the header. The initial value is HEADER_STATE_EXPANDED.
Depending on the configuration and the scrollTop value,
the header state could change to
HEADER_STATE_HIDDEN, HEADER_STATE_CONDENSED and HEADER_STATE_INTERPOLATED
*
* JavaScript Info:
* @property headerState
* @type Number
*
*/
@JsProperty void setHeaderState(double value);
/**
* If true, the condensed header is always shown and does not move away.
*
* JavaScript Info:
* @property keepCondensedHeader
* @type Boolean
*
*/
@JsProperty boolean getKeepCondensedHeader();
/**
* If true, the condensed header is always shown and does not move away.
*
* JavaScript Info:
* @property keepCondensedHeader
* @type Boolean
*
*/
@JsProperty void setKeepCondensedHeader(boolean value);
/**
* Invoke this to tell paper-scroll-header-panel to re-measure the header’s
height.
*
* JavaScript Info:
* @method measureHeaderHeight
*
*/
void measureHeaderHeight();
/**
* If true, no cross-fade transition from one background to another.
*
* JavaScript Info:
* @property noDissolve
* @type Boolean
*
*/
@JsProperty boolean getNoDissolve();
/**
* If true, no cross-fade transition from one background to another.
*
* JavaScript Info:
* @property noDissolve
* @type Boolean
*
*/
@JsProperty void setNoDissolve(boolean value);
/**
* If true, the header doesn’t slide back in when scrolling back up.
*
* JavaScript Info:
* @property noReveal
* @type Boolean
*
*/
@JsProperty boolean getNoReveal();
/**
* If true, the header doesn’t slide back in when scrolling back up.
*
* JavaScript Info:
* @property noReveal
* @type Boolean
*
*/
@JsProperty void setNoReveal(boolean value);
/**
* Scroll to a specific y coordinate.
*
* JavaScript Info:
* @method scroll
* @param {number} top
* @param {boolean} smooth
*
*/
void scroll(double top, boolean smooth);
/**
* By default, the top part of the header stays when the header is being
condensed. Set this to true if you want the top part of the header
to be scrolled away.
*
* JavaScript Info:
* @property scrollAwayTopbar
* @type Boolean
*
*/
@JsProperty boolean getScrollAwayTopbar();
/**
* By default, the top part of the header stays when the header is being
condensed. Set this to true if you want the top part of the header
to be scrolled away.
*
* JavaScript Info:
* @property scrollAwayTopbar
* @type Boolean
*
*/
@JsProperty void setScrollAwayTopbar(boolean value);
/**
* Scroll to the top of the content.
*
* JavaScript Info:
* @method scrollToTop
* @param {boolean} smooth
*
*/
void scrollToTop(boolean smooth);
/**
* Returns the scrollable element.
*
* JavaScript Info:
* @method scroller
*
*/
void scroller();
/**
*
*
* JavaScript Info:
* @property listeners
* @type Object
*
*/
@JsProperty JavaScriptObject getListeners();
/**
*
*
* JavaScript Info:
* @property listeners
* @type Object
*
*/
@JsProperty void setListeners(JavaScriptObject value);
/**
*
*
* JavaScript Info:
* @property observers
* @type Array
*
*/
@JsProperty JsArray getObservers();
/**
*
*
* JavaScript Info:
* @property observers
* @type Array
*
*/
@JsProperty void setObservers(JsArray value);
/**
* Used to assign the closest resizable ancestor to this resizable
if the ancestor detects a request for notifications.
*
* JavaScript Info:
* @method assignParentResizable
* @param {} parentResizable
* @behavior PaperTabs
*/
void assignParentResizable(JavaScriptObject parentResizable);
/**
* Can be called to manually notify a resizable and its descendant
resizables of a resize change.
*
* JavaScript Info:
* @method notifyResize
* @behavior PaperTabs
*/
void notifyResize();
/**
* This method can be overridden to filter nested elements that should or
should not be notified by the current element. Return true if an element
should be notified, or false if it should not be notified.
*
* JavaScript Info:
* @method resizerShouldNotify
* @param {HTMLElement} element
* @behavior PaperTabs
*/
void resizerShouldNotify(JavaScriptObject element);
/**
* Used to remove a resizable descendant from the list of descendants
that should be notified of a resize change.
*
* JavaScript Info:
* @method stopResizeNotificationsFor
* @param {} target
* @behavior PaperTabs
*/
void stopResizeNotificationsFor(JavaScriptObject target);
/**
*
*
* JavaScript Info:
* @method attached
* @behavior PaperTabs
*/
void attached();
/**
*
*
* JavaScript Info:
* @method detached
* @behavior PaperTabs
*/
void detached();
}