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

本文介绍了聚合物1.0 - 如何以编程方式更改字体大小？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I am using <paper-header-panel> with <paper-tabs> in a <paper-toolbar>. My app has two buttons for the user to increase and decrease font size. I do this:

int originalSizePC=100;

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

这样工作正常，但不影响< paper-tabs> 。

which works fine, except it doesn't affect the <paper-tabs>.

我想我需要做一些事情：

I guess I need to do something like:

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

正确的方法是什么？

感谢
Steve

ThanksSteve

推荐答案

如何计算该值。

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变量的值$ c>标签。

I wasn't able to figure out yet how to set values for custom CSS variables specified in a <style is="custom-style"> in the <head> tag.

这篇关于聚合物1.0 - 如何以编程方式更改字体大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！