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

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

The newest version!
/*
 * This code was generated with Vaadin Web Component GWT API Generator, 
 * from paper-badge 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;

/**
 * 

<paper-badge> is a circular text badge that is displayed on the top right
corner of an element, representing a status or a notification. It will badge
the anchor element specified in the for attribute, or, if that doesn’t exist,
centered to the parent node containing it.

*

Badges can also contain an icon by adding the icon attribute and setting
it to the id of the desired icon. Please note that you should still set the
label attribute in order to keep the element accessible. Also note that you will need to import
the iron-iconset that includes the icons you want to use. See iron-icon
for more information on how to import and use icon sets.

*

Example:

*
<div style="display:inline-block">
 *   <span>Inbox</span>
 *   <paper-badge label="3"></paper-badge>
 * </div>
 * 
 * <div>
 *   <paper-button id="btn">Status</paper-button>
 *   <paper-badge icon="favorite" for="btn" label="favorite icon"></paper-badge>
 * </div>
 * 
 * <div>
 *   <paper-icon-button id="account-box" icon="account-box" alt="account-box"></paper-icon-button>
 *   <paper-badge icon="social:mood" for="account-box" label="mood icon"></paper-badge>
 * </div>
 * 
 * 
 * 

Styling

*

The following custom properties and mixins are available for styling:

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Custom propertyDescriptionDefault
--paper-badge-backgroundThe background color of the badge--accent-color
--paper-badge-opacityThe opacity of the badge1.0
--paper-badge-text-colorThe color of the badge textwhite
--paper-badge-widthThe width of the badge circle20px
--paper-badge-heightThe height of the badge circle20px
--paper-badge-margin-leftOptional spacing added to the left of the badge.0px
--paper-badge-margin-bottomOptional spacing added to the bottom of the badge.0px
--paper-badgeMixin applied to the badge{}
*/ public class PaperBadge extends PolymerWidget { /** * Default Constructor. */ public PaperBadge() { this(""); } /** * Constructor used by UIBinder to create widgets with content. */ public PaperBadge(String html) { super(PaperBadgeElement.TAG, PaperBadgeElement.SRC, html); } /** * Gets a handle to the Polymer object's underlying DOM element. */ public PaperBadgeElement getPolymerElement() { return (PaperBadgeElement) getElement(); } /** *

An iron-icon ID. When given, the badge content will use an
<iron-icon> element displaying the given icon ID rather than the
label text. However, the label text will still be used for
accessibility purposes.

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

An iron-icon ID. When given, the badge content will use an
<iron-icon> element displaying the given icon ID rather than the
label text. However, the label text will still be used for
accessibility purposes.

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

The label displayed in the badge. The label is centered, and ideally
should have very few characters.

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

The label displayed in the badge. The label is centered, and ideally
should have very few characters.

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

The id of the element that the badge is anchored to. This element
must be a sibling of the badge.

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

The id of the element that the badge is anchored to. This element
must be a sibling of the badge.

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

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 * */ public void stopResizeNotificationsFor(Object target) { getPolymerElement().stopResizeNotificationsFor(target); } /** *

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 * */ public void assignParentResizable(Object parentResizable) { getPolymerElement().assignParentResizable(parentResizable); } /** *

Repositions the badge relative to its anchor element. This is called
automatically when the badge is attached or an iron-resize event is
fired (for exmaple if the window has resized, or your target is a
custom element that implements IronResizableBehavior).

*

You should call this in all other cases when the achor’s position
might have changed (for example, if it’s visibility has changed, or
you’ve manually done a page re-layout).

* * JavaScript Info: * @method updatePosition * * */ public void updatePosition() { getPolymerElement().updatePosition(); } /** *

Can be called to manually notify a resizable and its descendant
resizables of a resize change.

* * JavaScript Info: * @method notifyResize * @behavior VaadinSplitLayout * */ public void notifyResize() { getPolymerElement().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 VaadinSplitLayout * @return {boolean} */ public boolean resizerShouldNotify(JavaScriptObject element) { return getPolymerElement().resizerShouldNotify(element); } }




© 2015 - 2025 Weber Informatics LLC | Privacy Policy