More than 5 years have passed since last update.

Today's polymer element [paper-button]

Polymer

Posted at 2016-02-10

第2回目は paper-button です。

What is paper-button

paper-buttonとはマテリアルデザインを取り入れたボタンです。
そのまま使うとflatボタンとして使うことができ、propertyを設定することでraisedボタンとしても使うこともできます。
押下した箇所を起点に波紋(ripple effect)が広がるので押した感があってともいいです。

Example

サンプルコード

index.html

<!DOCTYPE html>
<html>
<head>
    <title>paper-button Sample</title>
    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="bower_components/paper-button/paper-button.html">
    <link rel="import" href="bower_components/iron-icons/iron-icons.html">
    <style>
       paper-button.fancy {
           background: green;
           color: yellow;
       }
       paper-button.fancy:hover {
           background: lime;
       }
       paper-button[toggles][active] {
           background: red;
       }
    </style>
</head>

<body>
<div class="contents">
    <paper-button>FLAT</paper-button>
    <paper-button class="fancy">COLOR</paper-button>
    <paper-button raised>RAISED</paper-button>
    <paper-button toggles raised>TOGGLES RAISED</paper-button>
    <paper-button disabled>DISABLED</paper-button>
    <paper-button raised>
        <iron-icon icon="favorite"></iron-icon>
        CUSTOM
    </paper-button>
</div>
</body>
</html>

サンプル結果

自分でエフェクトを書かなくていいのでかなり楽できますね。
propertyで細かく設定できますし、toggleなんかも選べて便利です。
propertyの詳細はAPI Referenceを見てみてください。

以上です。
次回はpaper-cardを紹介しようと思います。
そして毎日と言いつつ毎営業日です（汗）

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up