polymer 1.0 - 如何以编程方式更改字体大小？

Question

我在 <paper-toolbar> 中使用 <paper-header-panel> 和 <paper-tabs>。我的应用程序有两个按钮供用户增大和减小字体大小。我这样做：

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=....

请问正确的方法是什么？

谢谢史蒂夫

Answer 1

我稍微简化了值的计算方式。你当然可以按照自己的方式去做。

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();
  }
}

我还不知道如何为 <head> 标签中的 <style is="custom-style"> 中指定的自定义 CSS 变量设置值。

polymer 1.0 - 如何以编程方式更改字体大小？

polymer 1.0 - how to change font size programmatically?

dart

dart-polymer