Question

我有一个循环，通过以下代码4次，动态创建纸质菜单中的四个按钮。

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小于按钮的大小时，按钮会缩小，如下所示：

我如何强制执行＆＃34;目标＆＃34;按钮以适应菜单的宽度？

谢谢。

Answer 1

我意识到这不是你所要求的，但是fwiw，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纸张按钮尺寸

1 个答案: