Today's polymer element [paper-card]

세 번째는paper-card입니다.

What is paper-card

페이퍼카드 봤지만 카드 패러디 디자인이에요.
이미지와 문자 등 서로 다른 요소를 통일적으로 나타낼 수 있다.
나는 보는 것이 비교적 빠르다고 생각하기 때문에 서둘러 견본을 만들러 가자.

Example

샘플 코드

index.html

<!DOCTYPE html>
<html>
<head>
    <title>paper-card Sample</title>
    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
    <link rel="import" href="bower_components/iron-icons/iron-icons.html">
    <link rel="import" href="bower_components/paper-styles/paper-styles.html">
    <link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
    <link rel="import" href="bower_components/paper-card/paper-card.html">
    <style is="custom-style">
        .container {
            padding: 10px;
            margin: 0;
        }
        .container > div {
            padding: 15px;
            margin: 5px;
            background-color: white;
            min-height: 20px;
        }
        .vertical-section-container {
            max-width: 400px;
            margin: 0 auto;
        }
        paper-card.rate { @apply(--layout-horizontal); }
        .card-actions { padding: 3px 16px; }
        .rate-image {
            width: 100px;
            height: 170px;
            background: url('http://placehold.it/100x170/3f51b5/ffffff');
            background-size: cover;
        }
        .rate-content {
            @apply(--layout-flex);
            float: left;
        }
        .rate-header { @apply(--paper-font-headline); }
        .rate-name { color: var(--paper-grey-600); margin: 10px 0; }
        paper-icon-button.rate-icon {
            --iron-icon-fill-color: white;
            --iron-icon-stroke-color: var(--paper-grey-600);
        }
    </style>
</head>

<body>
<div class="vertical-section-container">
    <div class="container">
        <paper-card heading="Card" image="http://placehold.it/380x100/FFC107/000000">
            <div class="card-content">
                A card is a sheet of material that serves as an entry point to more detailed information. A card could contain a photo, text, and a link about a single subject.
            </div>
            <div class="card-actions">
                <paper-icon-button icon="favorite"></paper-icon-button>
            </div>
        </paper-card>
    </div>

    <div class="container">
        <paper-card class="rate">
            <div class="rate-content">
                <div class="card-content">
                    <div class="rate-header">paper-card</div>
                    <div class="rate-name">Card</div>
                    <div>Material design</div>
                </div>
                <div class="card-actions">
                    <paper-icon-button class="rate-icon" icon="star"></paper-icon-button>
                    <paper-icon-button class="rate-icon" icon="star"></paper-icon-button>
                    <paper-icon-button class="rate-icon" icon="star"></paper-icon-button>
                    <paper-icon-button class="rate-icon" icon="star"></paper-icon-button>
                    <paper-icon-button class="rate-icon" icon="star"></paper-icon-button>
                </div>
            </div>
            <div class="rate-image"></div>
        </paper-card>
    </div>
</div>
</body>
</html>

샘플 결과

리스트에 쓰면 멋있을 것 같은데.
(실제로 설계 가이드에서 사용하는 물건은 멋있다.)
나는 무엇이든 괜찮다고 생각하지만, 안내서를 보면서 적당한 곳에서 사용해야 한다.

Reference

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

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