Question

我在聚合物应用中的几个地方使用纸张下拉菜单。它在最顶层的文件（index.php）中运行良好。但不知何故，它并不适用于所有自定义元素。我必须做错事，因为我无法在网上找到其他人抱怨这个问题。有人可以看看这个元素并告诉我它是否正确？

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
<link rel="import" href="../../bower_components/iron-dropdown/iron-dropdown.html">
<link rel="import" href="../../bower_components/iron-icons/social-icons.html">
<link rel="import" href="../../bower_components/iron-icons/communication-icons.html">

<link rel="import" href="../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../bower_components/paper-item/paper-item.html">
<link rel="import" href="../../bower_components/paper-input/paper-input.html">
<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../bower_components/paper-styles/paper-styles-classes.html">

<link rel="import" href="../users-data/users-data.html">

<link rel="import" href="../../styles/shared-styles.html">

<dom-module id="account-user-add">
<template>
    <style include="shared-styles">
        :host {
            display: block;
        }
        *, ::after, ::before {
            box-sizing: border-box;
        }
    </style>

    <users-data users="{{users}}"></users-data>

    <paper-card>
        <div class="card-content">
            <!-- Contact photo area -->

            <div class="row padded">
                <div class="col s4 m3 l2">
                    <img class="circle responsive-img" src="[[user.avatar]]">
                </div>
                <div class="col s8 m9 l10 padded">
                    <h3>
                        <span>[[user.firstName]]</span> 
                        <span>[[user.lastName]]</span>
                    </h3>
                    <div class="layout horizontal">
                        <span>[[user.group]]</span> &nbsp;&nbsp;·&nbsp;&nbsp; <span>Active</span>
                    </div>
                </div>
            </div>



            <!-- Contact form -->
            <div id="contactForm">


                <!-- Group -->
                <div class="formRow layout horizontal">
                    <paper-dropdown-menu class="flex" label="Permission level">
                        <paper-menu attr-for-selected="value" selected="{{user.group}}" class="dropdown-content">
                            <paper-item value="Admin">Admin</paper-item>
                            <paper-item value="User">User</paper-item>
                        </paper-menu>
                    </paper-dropdown-menu>
                </div>

                <!-- Name -->
                <div class="formRow layout horizontal">
                    <paper-input value="{{user.firstName}}" class="item item-input flex" label="First name"></paper-input>
                    <paper-input value="{{user.lastName}}" class="item item-input flex" label="Last name"></paper-input>
                </div>

                <!-- Avatar -->
                <div class="formRow layout horizontal">
                    <paper-input value="{{user.avatar}}" class="item item-input flex" label="Avatar"></paper-input>
                </div>

                <!-- Phone -->
                <div class="formRow layout horizontal">
                    <paper-input value="{{user.telephone}}" class="item item-input flex" label="Phone"></paper-input>
                </div>

                <!-- Email -->
                <div class="formRow layout horizontal">
                    <paper-input value="{{user.email}}" class="item item-input flex" label="Email"></paper-input>
                </div>

                <!-- Address -->
                <div class="formRow layout horizontal">
                    <paper-input value="{{user.address}}" class="item item-input flex" label="Address"></paper-input>
                </div>

                <!-- Save -->
                <div class="formRow buttons">
                    <paper-button on-tap="_saveUser" raised><iron-icon icon="save"></iron-icon> Save</paper-button>
                </div>

            </div>
        </div>

    </paper-card>
</template>
<script>
    (function() {
        //'use strict';

        Polymer({
            is: 'account-user-add',

            properties: {
                users: {
                    type: Array
                },
                user: {
                    value: {},
                    type: Object
                }
            },
            _saveUser: function (event) {
                this.push('users', this.user);
                this.user = {};
                page('/account-users');
            }
        });
    })();
</script>
</dom-module>

Answer 1

当您在一个简单的文件中隔离纸张下拉菜单时似乎有效：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="import" href="bower_components/polymer/polymer.html">
    <link rel="import" href="bower_components/paper-card/paper-card.html">
    <link rel="import" href="bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
    <link rel="import" href="bower_components/paper-menu/paper-menu.html">
    <link rel="import" href="bower_components/paper-item/paper-item.html">
</head>
<body>
    <dom-module id="account-user-add">
        <template>
            <paper-card>
                <div class="formRow layout horizontal">
                    <paper-dropdown-menu class="flex" label="Permission level">
                        <paper-menu attr-for-selected="value" class="dropdown-content">
                            <paper-item value="Admin">Admin</paper-item>
                            <paper-item value="User">User</paper-item>
                        </paper-menu>
                    </paper-dropdown-menu>
                </div>
            </paper-card>
        </template>
        <script>
            Polymer( {
                is: "account-user-add"
            } )
        </script>
    </dom-module>   
    <account-user-add>

    </account-user-add>
</body>
</html>

Answer 2

这很奇怪。它似乎适用于This example

我什么也没做，但发布你的代码并添加每个导入工作的元素方。也许你可以检查那些？

Polymer 1.0下拉列表未在自定义元素中显示

2 个答案: