Question

纸质菜单项很好。我只需要更改所选/未选择值的宽度：

我在paper-dropdown-menu标签中尝试过这样的样式：

<paper-dropdown-menu 
id="districtDropdown" 
selected-item="{{selectedDistrict}}"
selected-item-label="{{selected}}"
label='&#65290;District' 
style="width:800px; 
display:inline-block;" 
noink no-animations>

但我只能将宽度更改为某个点（如上图所示），然后它不会变得更宽。

这是我做过的一项独立测试，不会改变纸张下拉的宽度：

<!DOCTYPE html>

<html>
<head>

<title>test </title>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">

<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<script src="ajax-form/ajax-form.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<link rel="import" href="bower_components/polymer/polymer.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">

<style is="custom-style">
  paper-dropdown-menu {
    --paper-dropdown-menu: {
      width: 800px;
    }
  }
</style>

</head>

<body>

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

</body>

</html>

Answer 1

检查paper-dropdown-menu docs，您应该使用--paper-dropdown-menu mixin来设置样式。这是一个fiddle的示例，其中包含了mixin所需的自定义css：

<style is="custom-style"> <!-- or just the <style> tag in a <dom-module>'s template -->
  paper-dropdown-menu {
    --paper-dropdown-menu: {
      width: 800px;
    }
  }
</style>

有关自定义CSS mixins的详细信息，请查看此docs。

Polymer 1.0：如何单独设置纸张下拉框的宽度？

1 个答案: