聚合物1.0紙張大小調整

我有一個循環，通過以下代碼4次，動態創建紙質菜單中的四個按鈕。聚合物1.0紙張大小調整

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比按鈕的尺寸更短，按鍵縮小爲：

我如何可以強制將「目標」按鈕，以適應菜單的寬度？

謝謝。

來源

2016-03-03 Dave

嘗試增加'顯示：塊;'你的風格。另外，如果你實際上不需要HTML，那麼使用'textContent'而不是'innerHTML'，這是一個很好的習慣，可以增強你對抗XSS的防禦能力。 –

謝謝@ScottMiles！我不得不將display：block添加到包含按鈕和按鈕的紙張項目的樣式中，但是這樣做的訣竅。我將切換回textContent。再次謝謝你。 – Dave

我意識到這不是你剛纔提出的問題，而是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>

來源

2016-03-03 20:42:34

謝謝。是的，我已經看到了，並玩了它。 – Dave

聚合物1.0紙張大小調整

回答

相關問題