polymer 1.0 - how to change font size programmatically?

问题

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

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

What is the correct method please?

Thanks Steve

回答1:

I simplified a bit how the value is calculated. You can of course do it your way.

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

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.

来源：https://stackoverflow.com/questions/33330007/polymer-1-0-how-to-change-font-size-programmatically

标签

dart

dart-polymer