параметры выпадающего меню бумаги располагаются горизонтально, а не вертикально

В списке задач 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 я не вижу, чтобы они делали что-то особенное, чтобы оно располагалось вертикально. Могу ли я узнать, что переопределяет стиль по умолчанию в приложении списка дел и как сделать так, чтобы он располагался вертикально? Спасибо.


polymer-starter-kit polymer-1.0
person user3240644    schedule 29.01.2016    source источник
comment
Вы импортировали paper-dropdown-menu, paper-listbox как это ?   -  person SG_    schedule 30.01.2016

Ответы (2)


arrow_upward
3
arrow_downward

Вы должны импортировать paper-dropdown-menu, paper-listbox перед его использованием. Убедитесь, что paper-dropdown-menu, paper-listbox и paper-item импортированы как это

Here is a working demo of paper-dropdown-menu alone 

<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>

person SG_    schedule 30.01.2016
comment
Спасибо! Я был уверен, что импортировал их. Проблема была между клавиатурой и стулом. Спасибо! - person user3240644; 01.02.2016
comment
Спасибо. Я импортировал все, кроме бумаги. Я почесал голову, и это было так очевидно :) - person Redshirt; 07.04.2016

arrow_upward
0
arrow_downward

Мне кажется, вам не хватает части 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>
person Ashton    schedule 29.01.2016