com.vaadin.polymer.paper.PaperTabsElement Maven / Gradle / Ivy
/*
* This code was generated with Vaadin Web Component GWT API Generator,
* from paper-tabs project by The Polymer Authors
* that is licensed with http://polymer.github.io/LICENSE.txt license.
*/
package com.vaadin.polymer.paper;
import com.vaadin.polymer.elemental.*;
import com.google.gwt.core.client.JavaScriptObject;
import com.google.gwt.core.client.JsArray;
import jsinterop.annotations.JsOverlay;
import jsinterop.annotations.JsProperty;
import jsinterop.annotations.JsType;
/**
* Material design: Tabs
* paper-tabs makes it easy to explore and switch between different views or functional aspects of
an app, or to browse categorized data sets.
* Use selected property to get or set the selected tab.
* Example:
* <paper-tabs selected="0">
* <paper-tab>TAB 1</paper-tab>
* <paper-tab>TAB 2</paper-tab>
* <paper-tab>TAB 3</paper-tab>
* </paper-tabs>
*
*
*
See paper-tab for more information about
paper-tab.
* A common usage for paper-tabs is to use it along with iron-pages to switch
between different views.
* <paper-tabs selected="{{selected}}">
* <paper-tab>Tab 1</paper-tab>
* <paper-tab>Tab 2</paper-tab>
* <paper-tab>Tab 3</paper-tab>
* </paper-tabs>
*
* <iron-pages selected="{{selected}}">
* <div>Page 1</div>
* <div>Page 2</div>
* <div>Page 3</div>
* </iron-pages>
*
*
*
*
To use links in tabs, add link attribute to paper-tab and put an <a>
element in paper-tab with a tabindex of -1.
* Example:
*
* <style is="custom-style">
* .link {
* @apply(--layout-horizontal);
* @apply(--layout-center-center);
* }
* </style>
*
* <paper-tabs selected="0">
* <paper-tab link>
* <a href="#link1" class="link" tabindex="-1">TAB ONE</a>
* </paper-tab>
* <paper-tab link>
* <a href="#link2" class="link" tabindex="-1">TAB TWO</a>
* </paper-tab>
* <paper-tab link>
* <a href="#link3" class="link" tabindex="-1">TAB THREE</a>
* </paper-tab>
* </paper-tabs>
*
*
* Styling
* The following custom properties and mixins are available for styling:
*
*
*
* Custom property
* Description
* Default
*
*
*
*
* --paper-tabs-selection-bar-colorColor for the selection bar
* --paper-yellow-a100
*
* --paper-tabs-selection-barMixin applied to the selection bar
* {}
*
* --paper-tabsMixin applied to the tabs
* {}
*
* --paper-tabs-contentMixin applied to the content container of tabs
* {}
*
* --paper-tabs-containerMixin applied to the layout container of tabs
* {}
*
*
*/
@JsType(isNative=true)
public interface PaperTabsElement extends HTMLElement {
@JsOverlay public static final String TAG = "paper-tabs";
@JsOverlay public static final String SRC = "paper-tabs/paper-tabs.html";
/**
* If true, this property will cause the implementing element to
automatically stop propagation on any handled KeyboardEvents.
*
* JavaScript Info:
* @property stopKeyboardEventPropagation
* @type Boolean
* @behavior VaadinDatePicker
*/
@JsProperty boolean getStopKeyboardEventPropagation();
/**
* If true, this property will cause the implementing element to
automatically stop propagation on any handled KeyboardEvents.
*
* JavaScript Info:
* @property stopKeyboardEventPropagation
* @type Boolean
* @behavior VaadinDatePicker
*/
@JsProperty void setStopKeyboardEventPropagation(boolean value);
/**
* The delay (in milliseconds) between when the user stops interacting
with the tabs through the keyboard and when the focused item is
automatically selected (if autoselect is true).
*
* JavaScript Info:
* @property autoselectDelay
* @type Number
*
*/
@JsProperty double getAutoselectDelay();
/**
* The delay (in milliseconds) between when the user stops interacting
with the tabs through the keyboard and when the focused item is
automatically selected (if autoselect is true).
*
* JavaScript Info:
* @property autoselectDelay
* @type Number
*
*/
@JsProperty void setAutoselectDelay(double value);
/**
* The list of items from which a selection can be made.
*
* JavaScript Info:
* @property items
* @type Array
* @behavior PaperTabs
*/
@JsProperty JsArray getItems();
/**
* The list of items from which a selection can be made.
*
* JavaScript Info:
* @property items
* @type Array
* @behavior PaperTabs
*/
@JsProperty void setItems(JsArray value);
/**
* Returns an array of currently selected items.
*
* JavaScript Info:
* @property selectedItems
* @type Array
* @behavior PaperTabs
*/
@JsProperty JsArray getSelectedItems();
/**
* Returns an array of currently selected items.
*
* JavaScript Info:
* @property selectedItems
* @type Array
* @behavior PaperTabs
*/
@JsProperty void setSelectedItems(JsArray value);
/**
* Gets or sets the selected elements. This is used instead of selected when multi
is true.
*
* JavaScript Info:
* @property selectedValues
* @type Array
* @behavior PaperTabs
*/
@JsProperty JsArray getSelectedValues();
/**
* Gets or sets the selected elements. This is used instead of selected when multi
is true.
*
* JavaScript Info:
* @property selectedValues
* @type Array
* @behavior PaperTabs
*/
@JsProperty void setSelectedValues(JsArray value);
/**
*
*
* JavaScript Info:
* @property keyBindings
* @type Object
* @behavior PaperTabs
*/
@JsProperty JavaScriptObject getKeyBindings();
/**
*
*
* JavaScript Info:
* @property keyBindings
* @type Object
* @behavior PaperTabs
*/
@JsProperty void setKeyBindings(JavaScriptObject value);
/**
* Returns the currently selected item.
*
* JavaScript Info:
* @property selectedItem
* @type ?Object
* @behavior PaperTabs
*/
@JsProperty JavaScriptObject getSelectedItem();
/**
* Returns the currently selected item.
*
* JavaScript Info:
* @property selectedItem
* @type ?Object
* @behavior PaperTabs
*/
@JsProperty void setSelectedItem(JavaScriptObject value);
/**
* Returns the currently focused item.
*
* JavaScript Info:
* @property focusedItem
* @type ?Object
* @behavior PaperTabs
*/
@JsProperty JavaScriptObject getFocusedItem();
/**
* Returns the currently focused item.
*
* JavaScript Info:
* @property focusedItem
* @type ?Object
* @behavior PaperTabs
*/
@JsProperty void setFocusedItem(JavaScriptObject value);
/**
* The EventTarget that will be firing relevant KeyboardEvents. Set it to
null to disable the listeners.
*
* JavaScript Info:
* @property keyEventTarget
* @type ?EventTarget
* @behavior VaadinDatePicker
*/
@JsProperty JavaScriptObject getKeyEventTarget();
/**
* The EventTarget that will be firing relevant KeyboardEvents. Set it to
null to disable the listeners.
*
* JavaScript Info:
* @property keyEventTarget
* @type ?EventTarget
* @behavior VaadinDatePicker
*/
@JsProperty void setKeyEventTarget(JavaScriptObject value);
/**
* Gets or sets the selected element. The default is to use the index of the item.
*
* JavaScript Info:
* @property selected
* @type (string|number)
* @behavior PaperTabs
*/
@JsProperty Object getSelected();
/**
* Gets or sets the selected element. The default is to use the index of the item.
*
* JavaScript Info:
* @property selected
* @type (string|number)
* @behavior PaperTabs
*/
@JsProperty void setSelected(Object value);
/**
*
*
* JavaScript Info:
* @property disabled
* @type Boolean
* @behavior PaperTabs
*/
@JsProperty boolean getDisabled();
/**
*
*
* JavaScript Info:
* @property disabled
* @type Boolean
* @behavior PaperTabs
*/
@JsProperty void setDisabled(boolean value);
/**
* If true, the tabs are aligned to bottom (the selection bar appears at the top).
*
* JavaScript Info:
* @property alignBottom
* @type Boolean
*
*/
@JsProperty boolean getAlignBottom();
/**
* If true, the tabs are aligned to bottom (the selection bar appears at the top).
*
* JavaScript Info:
* @property alignBottom
* @type Boolean
*
*/
@JsProperty void setAlignBottom(boolean value);
/**
* If true, tabs are automatically selected when focused using the
keyboard.
*
* JavaScript Info:
* @property autoselect
* @type Boolean
*
*/
@JsProperty boolean getAutoselect();
/**
* If true, tabs are automatically selected when focused using the
keyboard.
*
* JavaScript Info:
* @property autoselect
* @type Boolean
*
*/
@JsProperty void setAutoselect(boolean value);
/**
* If true, the bottom bar to indicate the selected tab will not be shown.
*
* JavaScript Info:
* @property noBar
* @type Boolean
*
*/
@JsProperty boolean getNoBar();
/**
* If true, the bottom bar to indicate the selected tab will not be shown.
*
* JavaScript Info:
* @property noBar
* @type Boolean
*
*/
@JsProperty void setNoBar(boolean value);
/**
* If true, multiple selections are allowed.
*
* JavaScript Info:
* @property multi
* @type Boolean
* @behavior PaperTabs
*/
@JsProperty boolean getMulti();
/**
* If true, multiple selections are allowed.
*
* JavaScript Info:
* @property multi
* @type Boolean
* @behavior PaperTabs
*/
@JsProperty void setMulti(boolean value);
/**
* If true, the slide effect for the bottom bar is disabled.
*
* JavaScript Info:
* @property noSlide
* @type Boolean
*
*/
@JsProperty boolean getNoSlide();
/**
* If true, the slide effect for the bottom bar is disabled.
*
* JavaScript Info:
* @property noSlide
* @type Boolean
*
*/
@JsProperty void setNoSlide(boolean value);
/**
* If true, ink ripple effect is disabled. When this property is changed,
all descendant <paper-tab> elements have their noink property
changed to the new value as well.
*
* JavaScript Info:
* @property noink
* @type Boolean
*
*/
@JsProperty boolean getNoink();
/**
* If true, ink ripple effect is disabled. When this property is changed,
all descendant <paper-tab> elements have their noink property
changed to the new value as well.
*
* JavaScript Info:
* @property noink
* @type Boolean
*
*/
@JsProperty void setNoink(boolean value);
/**
* If true, tabs are scrollable and the tab width is based on the label width.
*
* JavaScript Info:
* @property scrollable
* @type Boolean
*
*/
@JsProperty boolean getScrollable();
/**
* If true, tabs are scrollable and the tab width is based on the label width.
*
* JavaScript Info:
* @property scrollable
* @type Boolean
*
*/
@JsProperty void setScrollable(boolean value);
/**
* If true, dragging on the tabs to scroll is disabled.
*
* JavaScript Info:
* @property disableDrag
* @type Boolean
*
*/
@JsProperty boolean getDisableDrag();
/**
* If true, dragging on the tabs to scroll is disabled.
*
* JavaScript Info:
* @property disableDrag
* @type Boolean
*
*/
@JsProperty void setDisableDrag(boolean value);
/**
* If true, tabs expand to fit their container. This currently only applies when
scrollable is true.
*
* JavaScript Info:
* @property fitContainer
* @type Boolean
*
*/
@JsProperty boolean getFitContainer();
/**
* If true, tabs expand to fit their container. This currently only applies when
scrollable is true.
*
* JavaScript Info:
* @property fitContainer
* @type Boolean
*
*/
@JsProperty void setFitContainer(boolean value);
/**
* If true, scroll buttons (left/right arrow) will be hidden for scrollable tabs.
*
* JavaScript Info:
* @property hideScrollButtons
* @type Boolean
*
*/
@JsProperty boolean getHideScrollButtons();
/**
* If true, scroll buttons (left/right arrow) will be hidden for scrollable tabs.
*
* JavaScript Info:
* @property hideScrollButtons
* @type Boolean
*
*/
@JsProperty void setHideScrollButtons(boolean value);
/**
* This is a CSS selector string. If this is set, only items that match the CSS selector
are selectable.
*
* JavaScript Info:
* @property selectable
* @type string
* @behavior PaperTabs
*/
@JsProperty String getSelectable();
/**
* This is a CSS selector string. If this is set, only items that match the CSS selector
are selectable.
*
* JavaScript Info:
* @property selectable
* @type string
* @behavior PaperTabs
*/
@JsProperty void setSelectable(String value);
/**
* The attribute to set on elements when selected.
*
* JavaScript Info:
* @property selectedAttribute
* @type String
* @behavior PaperTabs
*/
@JsProperty String getSelectedAttribute();
/**
* The attribute to set on elements when selected.
*
* JavaScript Info:
* @property selectedAttribute
* @type String
* @behavior PaperTabs
*/
@JsProperty void setSelectedAttribute(String value);
/**
* The class to set on elements when selected.
*
* JavaScript Info:
* @property selectedClass
* @type String
* @behavior PaperTabs
*/
@JsProperty String getSelectedClass();
/**
* The class to set on elements when selected.
*
* JavaScript Info:
* @property selectedClass
* @type String
* @behavior PaperTabs
*/
@JsProperty void setSelectedClass(String value);
/**
* If you want to use an attribute value or property of an element for
selected instead of the index, set this to the name of the attribute
or property. Hyphenated values are converted to camel case when used to
look up the property of a selectable element. Camel cased values are
not converted to hyphenated values for attribute lookup. It’s
recommended that you provide the hyphenated form of the name so that
selection works in both cases. (Use attr-or-property-name instead of
attrOrPropertyName.)
*
* JavaScript Info:
* @property attrForSelected
* @type String
* @behavior PaperTabs
*/
@JsProperty String getAttrForSelected();
/**
* If you want to use an attribute value or property of an element for
selected instead of the index, set this to the name of the attribute
or property. Hyphenated values are converted to camel case when used to
look up the property of a selectable element. Camel cased values are
not converted to hyphenated values for attribute lookup. It’s
recommended that you provide the hyphenated form of the name so that
selection works in both cases. (Use attr-or-property-name instead of
attrOrPropertyName.)
*
* JavaScript Info:
* @property attrForSelected
* @type String
* @behavior PaperTabs
*/
@JsProperty void setAttrForSelected(String value);
/**
* The event that fires from items when they are selected. Selectable
will listen for this event from items and update the selection state.
Set to empty string to listen to no events.
*
* JavaScript Info:
* @property activateEvent
* @type String
* @behavior PaperTabs
*/
@JsProperty String getActivateEvent();
/**
* The event that fires from items when they are selected. Selectable
will listen for this event from items and update the selection state.
Set to empty string to listen to no events.
*
* JavaScript Info:
* @property activateEvent
* @type String
* @behavior PaperTabs
*/
@JsProperty void setActivateEvent(String value);
/**
* Default fallback if the selection based on selected with attrForSelected
is not found.
*
* JavaScript Info:
* @property fallbackSelection
* @type String
* @behavior PaperTabs
*/
@JsProperty String getFallbackSelection();
/**
* Default fallback if the selection based on selected with attrForSelected
is not found.
*
* JavaScript Info:
* @property fallbackSelection
* @type String
* @behavior PaperTabs
*/
@JsProperty void setFallbackSelection(String value);
/**
* The attribute to use on menu items to look up the item title. Typing the first
letter of an item when the menu is open focuses that item. If unset, textContent
will be used.
*
* JavaScript Info:
* @property attrForItemTitle
* @type String
* @behavior PaperTabs
*/
@JsProperty String getAttrForItemTitle();
/**
* The attribute to use on menu items to look up the item title. Typing the first
letter of an item when the menu is open focuses that item. If unset, textContent
will be used.
*
* JavaScript Info:
* @property attrForItemTitle
* @type String
* @behavior PaperTabs
*/
@JsProperty void setAttrForItemTitle(String 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 VaadinSplitLayout
*
*/
void assignParentResizable(Object parentResizable);
/**
* Selects the given value. If the multi property is true, then the selected state of the
value will be toggled; otherwise the value will be selected.
*
* JavaScript Info:
* @method select
* @param {(string|number)} value
* @behavior PaperTabs
*
*/
void select(Object value);
/**
*
*
* JavaScript Info:
* @method multiChanged
* @param {} multi
* @behavior PaperTabs
*
*/
void multiChanged(Object multi);
/**
* Selects the item at the given index.
*
* JavaScript Info:
* @method selectIndex
* @param {} index
* @behavior PaperTabs
*
*/
void selectIndex(Object index);
/**
* Can be used to imperatively add a key binding to the implementing
element. This is the imperative equivalent of declaring a keybinding
in the keyBindings prototype property.
*
* JavaScript Info:
* @method addOwnKeyBinding
* @param {} eventString
* @param {} handlerName
* @behavior VaadinDatePicker
*
*/
void addOwnKeyBinding(Object eventString, Object handlerName);
/**
* 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 VaadinSplitLayout
*
*/
void stopResizeNotificationsFor(Object target);
/**
* When called, will remove all imperatively-added key bindings.
*
* JavaScript Info:
* @method removeOwnKeyBindings
* @behavior VaadinDatePicker
*
*/
void removeOwnKeyBindings();
/**
* Force a synchronous update of the items property.
* NOTE: Consider listening for the iron-items-changed event to respond to
updates to the set of selectable items after updates to the DOM list and
selection state have been made.
* WARNING: If you are using this method, you should probably consider an
alternate approach. Synchronously querying for items is potentially
slow for many use cases. The items property will update asynchronously
on its own to reflect selectable items in the DOM.
*
* JavaScript Info:
* @method forceSynchronousItemUpdate
* @behavior PaperTabs
*
*/
void forceSynchronousItemUpdate();
/**
* Selects the next item.
*
* JavaScript Info:
* @method selectNext
* @behavior PaperTabs
*
*/
void selectNext();
/**
* Selects the previous item.
*
* JavaScript Info:
* @method selectPrevious
* @behavior PaperTabs
*
*/
void selectPrevious();
/**
* Can be called to manually notify a resizable and its descendant
resizables of a resize change.
*
* JavaScript Info:
* @method notifyResize
* @behavior VaadinSplitLayout
*
*/
void notifyResize();
/**
* Returns true if a keyboard event matches eventString.
*
* JavaScript Info:
* @method keyboardEventMatchesKeys
* @param {KeyboardEvent} event
* @param {string} eventString
* @behavior VaadinDatePicker
* @return {boolean}
*/
boolean keyboardEventMatchesKeys(JavaScriptObject event, String eventString);
/**
* 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 VaadinSplitLayout
* @return {boolean}
*/
boolean resizerShouldNotify(JavaScriptObject element);
/**
* Returns the index of the given item.
*
* JavaScript Info:
* @method indexOf
* @param {Object} item
* @behavior PaperTabs
*
*/
void indexOf(JavaScriptObject item);
}