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 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);
/**
* 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);
/**
* 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);
/**
* Returns the scrollable element.
*
* JavaScript Info:
* @method scroller
*
*/
void scroller();
/**
*
*
* JavaScript Info:
* @method detached
*
*/
void detached();
/**
*
*
* 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 NeonAnimatedPages
*/
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 NeonAnimatedPages
*/
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 NeonAnimatedPages
*/
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 NeonAnimatedPages
*/
void stopResizeNotificationsFor(JavaScriptObject target);
/**
*
*
* JavaScript Info:
* @method attached
* @behavior NeonAnimatedPages
*/
void attached();
}