Today's polymer element [paper-button]

4224 단어 Polymer
두 번째는 페이퍼버튼이다.

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를 참조하십시오.
그게 다야.
다음에는 파퍼카드 소개해드리고 싶어요.
그리고 매일 영업일(땀)
[실기] 라우터 텔넷 세션 자동종료, 콘솔 패스워드 설정
[프로그래머스/파이썬] 가운데 글자 가져오기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage