GithubHelp home page GithubHelp logo

ryanburns23 / paper-icon-button Goto Github PK

View Code? Open in Web Editor NEW

This project forked from polymerelements/paper-icon-button

0.0 1.0 0.0 126 KB

A Material Design icon button

Home Page: https://www.webcomponents.org/element/PolymerElements/paper-icon-button

HTML 100.00%

paper-icon-button's Introduction

Build status

Demo and API docs

<paper-icon-button>

Material design: Icon toggles

paper-icon-button is a button with an image placed at the center. When the user touches the button, a ripple effect emanates from the center of the button.

paper-icon-button does not include a default icon set. To use icons from the default set, include PolymerElements/iron-icons/iron-icons.html, and use the icon attribute to specify which icon from the icon set to use.

<paper-icon-button icon="favorite"></paper-icon-button>
<paper-icon-button icon="menu"></paper-icon-button>
<paper-icon-button icon="star"></paper-icon-button>

See iron-iconset for more information about how to use a custom icon set.

Example:

<link href="path/to/iron-icons/iron-icons.html" rel="import">

<paper-icon-button icon="favorite"></paper-icon-button>
<paper-icon-button src="star.png"></paper-icon-button>

To use paper-icon-button as a link, wrap it in an anchor tag. Since paper-icon-button will already receive focus, you may want to prevent the anchor tag from receiving focus as well by setting its tabindex to -1.

<a href="https://www.polymer-project.org" tabindex="-1">
  <paper-icon-button icon="polymer"></paper-icon-button>
</a>

Styling

Style the button with CSS as you would a normal DOM element. If you are using the icons provided by iron-icons, they will inherit the foreground color of the button.

/* make a red "favorite" button */
<paper-icon-button icon="favorite" style="color: red;"></paper-icon-button>

By default, the ripple is the same color as the foreground at 25% opacity. You may customize the color using the --paper-icon-button-ink-color custom property.

The following custom properties and mixins are available for styling:

Custom property Description Default
--paper-icon-button-disabled-text The color of the disabled button --disabled-text-color
--paper-icon-button-ink-color Selected/focus ripple color --primary-text-color
--paper-icon-button Mixin for a button {}
--paper-icon-button-disabled Mixin for a disabled button {}
--paper-icon-button-hover Mixin for button on hover {}

paper-icon-button's People

Contributors

abdonrd avatar addyosmani avatar atotic avatar bicknellr avatar blasten avatar cdata avatar danbeam avatar dfreedm avatar dschuyler avatar ebidel avatar frankiefu avatar fredj avatar hemantjadon avatar jeffposnick avatar keanulee avatar michael-k avatar mikaelharsjo avatar notwaldorf avatar rictic avatar ryanburns23 avatar sorvell avatar stefanritter avatar tedium-bot avatar tjsavage avatar tomalec avatar tyriar avatar wiltzius avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.