Today's polymer element [paper-badge]

지금부터 매일 polymer 디렉토리에서 Element을 하나씩 소개합니다.(열심히 소개할게요.)
다른 기회에 환경 구축과 Polymer를 소개할 수 있다면
그럼 시작합시다.하나씩 소개해 드리려고요.
첫 번째는 페이퍼백지였다.

What is paper-badge

paper-badge는 상태와 알림을 표시하는 데 사용됩니다.
문자열과 아이콘을 표시할 수 있습니다. 적절한 방법을 사용하면 사용자에게 무슨 일이 일어났는지 알릴 수 있습니다.
웹 사이트나 스마트폰 게임에서도 빈번하게 사용하는 기능이다.
그럼 샘플 코드를 봅시다.

Example

샘플 코드

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="bower_components/iron-icons/communication-icons.html">
    <link rel="import" href="bower_components/iron-icons/iron-icons.html">
    <link rel="import" href="bower_components/iron-icons/social-icons.html">
    <link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
    <link rel="import" href="bower_components/paper-badge/paper-badge.html">
    <style>
       .contents {
           margin-top: 20px;
           display: inline-block;
       }
    </style>
</head>

<body>
<div class="contents">
    <paper-icon-button id="number" icon="communication:email" alt="inbox"></paper-icon-button>
    <paper-badge for="number" label="4"></paper-badge>

    <paper-icon-button id="icon" icon="account-box" alt="person"></paper-icon-button>
    <paper-badge icon="social:mood" for="icon" label="happy"></paper-badge>
</div>
</body>
</html>

샘플 결과

paper-elements
for 속성이 지정한 id의 오른쪽 상단에 휘장을 표시합니다.for 속성을 지정하지 않으면 부모 노드에 부착될 수 있습니다.
icon 속성에 표시할 icon을 지정하면 icon을 표시할 수도 있습니다.
그게 다야.
아이콘과 조합해서 다양한 걸 보여줄 수 있어서 재밌어요.
다음에는 파퍼버튼 소개해드리고 싶어요.

Reference

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

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