Polymer paper elements (material design)

paper-button is a button containing text or an image. When the user touches the button, a ripple effect emanates from the point of contact.

A paper-button may be flat or raised. A raised button behaves like a piece of paper resting on another sheet, and lifts up upon press. Flat buttons do not raise up. Add the raisedButton attribute to make a raised button.

Example:

<paper-button label="flat button"></paper-button>
<paper-button label="raised button" raisedButton></paper-button>

A button should be styled with a background color, text color, ripple color and hover color.

To style the background, text and hover color, apply the background and color CSS properties to the button. To style the ripple color, apply the color CSS property to the #ripple element in the button’s shadow root:

/* Style #my-button blue with white text and darker blue ink. */
#my-button {
    background: #4285f4;
    color: #fff;
}

#my-button:hover {
    background: #2a56c6;
}

#my-button::shadow #ripple {
    color: #2a56c6;
}

Attributes

label

stringdefault: ''

The label of the button.

raisedButton

booleandefault: false

If true, the button will be styled as a “raised” button.

iconSrc

stringdefault: ''

(optional) The URL of an image for an icon to use in the button. Should not useicon property if you are using this property.

icon

stringdefault: ''

(optional) Specifies the icon name or index in the set of icons available in the icon set. If using this property, load the icon set separately where the icon is used. Should not use src if you are using this property.

 

Reference: https://www.polymer-project.org/docs/elements/paper-elements.html#paper-button

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s