我在<paper-header-panel>
中使用<paper-tabs>
和<paper-toolbar>
。我的应用程序有两个按钮供用户增加和减少字体大小。我这样做:
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=....
请问正确的方法是什么?
由于 史蒂夫
答案 0 :(得分:2)
我简化了计算值的方法。你当然可以按照自己的方式去做。
<强> 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">
标记中的<head>
中指定的自定义CSS变量设置值。