聚合物 1.0 纸按钮尺寸

Question

我有一个循环，它通过以下代码 4 次来动态地在 paper-menu 中创建四个按钮。

button = document.createElement('paper-button');
sectionDisplayName = <my string>;
console.log(">"+sectionDisplayName+"<");
Polymer.dom(button).setAttribute("section", sectionDisplayName);
Polymer.dom(button).setAttribute("raised");
Polymer.dom(button).setAttribute("style","white-space:pre-wrap");
Polymer.dom(button).innerHTML = sectionDisplayName;

当 sectionDisplayName 比按钮的尺寸短时，按钮会缩小，如下所示：

如何强制 "Goals" 按钮适应菜单的宽度？

谢谢。

Answer 1

我知道这不是您要问的确切内容，但是顺便说一下，Polymer 有工具可以为您简化此操作。例如：

<!doctype html>
<head>
  <meta name="description" content="Polymer Example">
  <meta charset="utf-8">
  <base href="http://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="paper-elements/paper-elements.html" rel="import">
  <style>
    body {
      font-family: sans-serif;
    }
  </style>
</head>
<body>
  <paper-menu style="width: 200px;">
    <template is="dom-repeat">
      <paper-button section="{{item.name}}" raised style="white-space: pre-wrap; display:block">{{item.name}}</paper-button>
    </template>
  </paper-menu>
  <script>
    var sections = [
      {name: 'Health Concerns Document'},
      {name: 'Goals'},
      {name: 'Interventions Provided'},
      {name: 'Patient Problem Outcome'}
    ];
    document.querySelector('template').items = sections;
  </script>
</body>

聚合物 1.0 纸按钮尺寸

Polymer 1.0 paper-button sizing

polymer

polymer-1.0