Today's polymer element [paper-button]

두 번째는 페이퍼버튼이다.

What is paper-button

paper-button은 소재 디자인을 사용한 버튼입니다.
직접 사용하면 flat 단추로 사용할 수 있고,property를 설정하면raised 단추로 사용할 수 있습니다.
누른 곳을 기점으로 물결무늬가 펼쳐져 누르는 느낌이 든다.

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을 선택할 수 있어 매우 편리합니다.
자세한 내용은 API Reference를 참조하십시오.
그게 다야.
다음에는 파퍼카드 소개해드리고 싶어요.
그리고 매일 영업일(땀)

Reference

이 문제에 관하여(Today's polymer element [paper-button]), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/IinoMasaki/items/3e34c99b63e65d47f466

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.