Question

我尝试学习聚合物，直到现在，我认为我的方式很好。但是，我找到了一个具有相同Google Material Design的框架，我正在尝试将他们的教程实现为Polymer代码。

框架是：http://materializecss.com/我尝试实施的组件是Card reveal

我有关于它应该如何在materializecss上的代码

<div class="col l4 m4 s1">
    <div class="card">
        <div class="card-image waves-effect waves-block waves-light">
            <img class="responsive-img" src="/static/images/myimage.png">
        </div>
        <div class="card-content">
            <span class="card-title activator grey-text text-darken-4">Training Estimation <i class="mdi-navigation-more-vert right"></i></span>
            <p><a href="#">This is a link</a></p>
        </div>
        <div class="card-reveal">
            <span class="card-title grey-text text-darken-4">Card Title <i class="mdi-navigation-close right"></i></span>
            <p>Here is some more information about this product that is only revealed once clicked on.</p>
        </div>
    </div>
 </div>

但是，我不知道如何直接在Polymer上启动和重写相同的功能。

Answer 1

可以使用聚合物core-animated-pages完成。

演示和代码：https://github.com/DinethH/card-reveal

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-shadow/paper-shadow.html">
<link rel="import" href="../../bower_components/font-roboto/roboto.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../bower_components/core-animated-pages/core-animated-pages.html">
<link rel="import" href="../../bower_components/core-animated-pages/transitions/slide-up.html">
<link rel="import" href="../../bower_components/core-animated-pages/transitions/slide-down.html">
<link rel="import" href="../../bower_components/core-animated-pages/transitions/cross-fade.html">

<polymer-element name="card-reveal" center layout>
<template>
    <style>
        paper-shadow,
        core-animated-pages section {
            height: 500px;
            width: 500px;
        }
        core-animated-pages section {
            overflow: hidden;
        }
        h3 {
            font-weight: 300;
            font-size: 26px;
            margin: 0;
            padding: 0;
            padding-bottom: 10px;
        }
        .card-content,
        .card-reveal {
            padding: 20px;
            background: white;
            height: 500px;
        }
        a {
            color: orange;
            text-transform: uppercase;
        }
    </style>
<paper-shadow>
        <core-animated-pages transitions="slide-up" selected="{{selected}}">
            <section>
                <div>
                    <img src="http://lorempixel.com/500/380/">
                    <div>
                        <div class="card-content">
                            <div layout horizontal>
                                <div flex>
                                    <h3>{{item.title}}</h3>
                                </div>
                                <div>
                                    <paper-icon-button on-tap="{{reveal}}" icon="more-vert"></paper-icon-button>
                                </div>
                            </div>
                            <a>This is a link</a>
                        </div>
                    </div>
                </div>
            </section>
            <section>
                <div class="card-reveal" slide-up cross-fade>
                    <div layout horizontal>
                        <div flex>
                            <h3>{{item.title}}</h3>
                        </div>
                        <div>
                            <paper-icon-button on-tap="{{reveal}}" icon="close"></paper-icon-button>
                        </div>
                    </div>
                    <div>
                        {{item.more}}
                    </div>
                </div>
            </section>
        </core-animated-pages>
    </paper-shadow>
</template>

<script>
    Polymer({
        created: function () {
            this.item = {
                title: "Card Title",
                more: "Here is some more information about this product that is only revealed once clicked on."
            };
        },
        reveal: function () {
            if (this.selected == 0) {
                this.selected = 1;
            } else {
                this.selected = 0;
            }
        }
    });
</script>

</polymer-element>

在Polymer中创建一张带wave的卡片

1 个答案: