paper-dropdown-menu 选项水平堆叠而不是垂直堆叠

Question

在 Polymer 实验室待办事项列表 https://github.com/PolymerLabs/todo-list.git 中，我在 index.html

中添加了一个纸质下拉菜单

<body unresolved class="fullbleed layout vertical">
<span id="browser-sync-binding"></span>
<template is="dom-bind" id="app">

<todo-auth id="auth"
           user="{{user}}"
           location="[[firebaseURL]]"
           user="{{user}}">
</todo-auth>

<todo-data location="[[firebaseURL]]"
           todos="{{todos}}"
           user="{{user}}">
</todo-data>

<todo-view class="flex"
           route="{{route}}"
           todos="{{todos}}"
           on-sign-out="signOut">
</todo-view>

<paper-dropdown-menu label="Time">
  <paper-listbox class="dropdown-content" selected="0">
    <paper-item>All dDay</paper-item>
    <paper-item>AM</paper-item>
    <paper-item>PM</paper-item>
  </paper-listbox>
</paper-dropdown-menu>

<paper-toast id="caching-complete"
             duration="6000"
             text="Caching complete! This app will work offline.">
</paper-toast>

但是，选项不是垂直堆叠，而是像这样水平堆叠

在 paper-dropdown-menu 演示的源代码中，我没有看到他们为了垂直堆叠做了什么特别的事情。我可以知道是什么覆盖了待办事项列表应用程序中的默认样式以及如何使其垂直堆叠吗？谢谢

Answer 1

在我看来你遗漏了 paper-menu 部分。以下摘录来自文档。

<paper-dropdown-menu label="Your favourite pastry">
  <paper-menu class="dropdown-content">
<paper-item>Croissant</paper-item>
<paper-item>Donut</paper-item>
<paper-item>Financier</paper-item>
<paper-item>Madeleine</paper-item>
  </paper-menu>
</paper-dropdown-menu>

Answer 2

您必须在使用前导入 paper-dropdown-menu、paper-listbox。确保 paper-dropdown-menu、paper-listbox 和 paper-item 像 this

一样导入

这里是 paper-dropdown-menu 单独的工作演示

<html>  
<head>

  <title>Template me</title>
  
  <script src="https://rawgit.com/webcomponents/webcomponentsjs/master/webcomponents.js"></script>
  
  <base href="http://polygit.org/components/">
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-listbox/paper-listbox.html">
  <link rel="import" href="paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="paper-item/paper-item.html">
  
</head>
<body class="fullbleed">

<custom-listbox id="CustomListboxID"></custom-listbox>

<dom-module is="custom-listbox">
<template>
<paper-dropdown-menu label="Time">
  <paper-listbox class="dropdown-content" selected="0">
    <paper-item>All dDay</paper-item>
    <paper-item>AM</paper-item>
    <paper-item>PM</paper-item>
  </paper-listbox>
</paper-dropdown-menu>

</template>

<script>
Polymer({
  is: 'custom-listbox'
});
</script>

</dom-module>

</body>
</html>

paper-dropdown-menu 选项水平堆叠而不是垂直堆叠

paper-dropdown-menu options are horizontally stacked instead of vertically stacked

polymer-1.0

polymer-starter-kit