Polymer 1.0 纸张按钮上浆答案

【问题标题】：Polymer 1.0 paper-button sizingPolymer 1.0 纸张按钮上浆
【发布时间】：2016-03-04 04:42:34
【问题描述】：

我有一个循环遍历以下代码 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 小于按钮的大小时，按钮会缩小，如下所示：

如何强制“目标”按钮适应菜单的宽度？

谢谢。

【问题讨论】：

尝试将display: block; 添加到您的风格中。此外，如果您实际上不需要 HTML，请使用 textContent 而不是 innerHTML，这是一个增加对 XSS 防御的好习惯。
谢谢你，@ScottMiles！我必须添加 display: block 到包含按钮和按钮的纸质项目的样式中，但这起到了作用。我将切换回 textContent。再次感谢您。

标签： polymer polymer-1.0

【解决方案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>

【讨论】：

谢谢。是的，我已经看到并玩过了。