Question

在Polymer labs todo-list 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>

但是，它们不是垂直堆叠的选项，而是像

那样水平堆叠

在纸张下拉菜单演示的源代码中，我没有看到它们做任何特殊的垂直堆叠。我可以知道什么是覆盖todo-list应用程序中的默认样式以及如何使其垂直堆叠？感谢。

Answer 1

在使用之前，您必须导入paper-dropdown-menu，paper-listbox。确保paper-dropdown-menu，paper-listbox＆amp;导入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>

Answer 2

在我看来，你错过了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>

纸张下拉菜单选项是水平堆叠而不是垂直堆叠

2 个答案: