Polymer 1.0: Как установить ширину ‹выпадающего меню бумаги›?

Вот JSBin.

Как мне сделать dropdown-menu шириной 800px?

http://jsbin.com/xamejogobe/1/edit?html,output 
<!DOCTYPE html>
<html>  
<head>
  <meta charset="utf-8">
  <title>Polymer Bin</title>
  <base href="http://element-party.xyz">
  <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="all-elements.html">
</head>
<body>
<x-element></x-element>
<dom-module id="x-element">
  <template>
    <style>
      paper-menu {
        --paper-dropdown-menu: {
          width: 800px;
        };
      }
    </style>
    Click the below menu icon to make the dropdown menu appear.
    <br>
    <paper-menu-button>
      <paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
      <paper-menu class="dropdown-content">
        <paper-item>Share</paper-item>
        <paper-item>Settings</paper-item>
        <paper-item>Help</paper-item>
      </paper-menu>
    </paper-menu-button>
  </template>
  <script>
    (function(){
      Polymer({
        is: 'x-element'
      });
    })();
  </script>
</dom-module>
</body>
</html>

polymer paper-elements polymer-1.0
person Let Me Tink About It    schedule 09.10.2015    source источник

Ответы (2)


arrow_upward
1
arrow_downward

если вы удалите --paper-dropdown-menu, вы получите широкое меню 800px:

http://jsbin.com/cehanu/3/edit?html,output

person user656449    schedule 09.10.2015

arrow_upward
1
arrow_downward

Ниже обновляется импорт принятых ответов.

http://jsbin.com/xironutuqi/1/edit?html,output 
<!DOCTYPE html>
<html>  
<head>
  <meta charset="utf-8">
  <title>Polymer Bin</title>
  <meta charset="utf-8">
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
  <link href="paper-menu/paper-menu.html" rel="import">
  <link href="paper-menu-button/paper-menu-button.html" rel="import">
  <link href="paper-item/paper-item.html" rel="import">
  <link href="paper-icon-button/paper-icon-button.html" rel="import">
  <link href="iron-icons/iron-icons.html" rel="import">
</head>
<body>
<x-element></x-element>
<dom-module id="x-element">
  <template>
    <style>
      paper-menu {
        width: 800px;
      }
    </style>
    Click the below menu icon to make the dropdown menu appear.
    <br>
    <paper-menu-button>
      <paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
      <paper-menu class="dropdown-content">
        <paper-item>Share</paper-item>
        <paper-item>Settings</paper-item>
        <paper-item>Help</paper-item>
      </paper-menu>
    </paper-menu-button>
  </template>
  <script>
    (function(){
      Polymer({
        is: 'x-element'
      });
    })();
  </script>
</dom-module>

</body>
</html>
person Let Me Tink About It    schedule 09.10.2015