0

在 Polymer labs 待办事项列表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 演示的源代码中，我没有看到他们做任何特别的事情来让它垂直堆叠。我可以知道什么覆盖了待办事项列表应用程序中的默认样式以及如何让它垂直堆叠？谢谢。

4

2 回答 2

3

您必须先导入paper-dropdown-menu,paper-listbox才能使用它。确保paper-dropdown-menu, paper-listbox&paper-item像这样导入

这是一个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>

于 2016-01-30T02:38:39.247 回答
0

在我看来，你错过了这个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>
于 2016-01-29T12:04:45.970 回答