聚合物1.0 - 如何以編程方式更改字體大小？

我在<paper-toolbar>中使用<paper-header-panel>和<paper-tabs>。我的應用程序有兩個按鈕供用戶增加和減小字體大小。我這樣做：聚合物1.0 - 如何以編程方式更改字體大小？

int originalSizePC=100; 

@Listen ("handleBigger") 
handleBigger(var event, var x) { 
originalSizePC=(originalSizePC*1.1).round(); 
document.body.style.fontSize=originalSizePC.toString()+'%'; 
}

其工作正常，但它不會影響<paper-tabs>。

我想我需要做一些事情，如：

PaperTabs pt=document.querySelector('#primaryTabs'); 
    pt.style.fontsize=....

什麼是正確的方法嗎？

感謝史蒂夫

來源

2015-10-25 Lymp

我簡化了一下的價值是如何計算的。你當然可以按你的方式去做。

app_element.html

<!DOCTYPE html> 
<dom-module id='app-element'> 
    <template> 
    <style> 
     :root { 
     --my-theme-font-size: 100%; 

     /* set font-size globally for all paper-button and paper-tabs 
      elements */ 
     --paper-button: { 
      font-size: var(--my-theme-font-size); 
     }; 

     --paper-tabs: { 
      font-size: var(--my-theme-font-size); 
     } 
     } 

     /* or alternatively for specific elements 
     paper-button { 
      --paper-button: { 
      font-size: var(--my-theme-font-size); 
     }; 
     } 
     paper-tabs { 
     --paper-tabs: { 
     font-size: var(--my-theme-font-size); 
     } 
     } 
     */ 
    </style> 
    <paper-button on-click="handleBigger" raised>bigger</paper-button> 
    <paper-header-panel> 
     <paper-toolbar class="paper-header"> 
     <paper-tabs selected="0"> 
      <paper-tab>TAB 1</paper-tab> 
      <paper-tab>TAB 2</paper-tab> 
      <paper-tab>TAB 3</paper-tab> 
     </paper-tabs> 
     </paper-toolbar> 
    </paper-header-panel> 
    </template> 
</dom-module>

app_element.dart

@HtmlImport('app_element.html') 
library font_size_imperatively.web.app_element; 

import 'package:web_components/web_components.dart' show HtmlImport; 
import 'package:polymer/polymer.dart'; 
import 'package:polymer_elements/paper_button.dart'; 
import 'package:polymer_elements/paper_header_panel.dart'; 
import 'package:polymer_elements/paper_toolbar.dart'; 
import 'package:polymer_elements/paper_tabs.dart'; 
import 'package:polymer_elements/paper_tab.dart'; 

/// [PaperButton], [PaperHeaderPanel], [PaperToolbar], [PaperTabs], [PaperTab] 
@PolymerRegister('app-element') 
class AppElement extends PolymerElement { 
    AppElement.created() : super.created(); 

    @reflectable 
    void handleBigger(var event, var x) { 
    customStyle['--my-theme-font-size'] = '250%'; 
    Polymer.updateStyles(); 
    } 
}

我無法弄清楚但如何爲在<style is="custom-style">指定的自定義CSS變量的值<head>標籤。

來源

2015-10-25 16:56:47

嗨，謝謝，但我無法得到它的工作（我嘗試了幾個變化 - 不同的dom模塊）。 handleBigger被稱爲OK。我試圖看看「var xx = customStyle [' - my-theme-font-size']但是返回xx = null。乾杯，S – Lymp

嗨。它對我有用（偶然）。我恢復了原來的handleBigger （），但忘記刪除你的：root風格，現在它可以工作，但我不知道爲什麼。乾杯，S – Lymp

如果這回答你的問題，請使用upvote按鈕下方的複選標記接受它，謝謝。 –

聚合物1.0 - 如何以編程方式更改字體大小？

回答

相關問題