im trying learn polymer, cannot understand how style elements in version 1.0. exemple show this..
custom property | description | default ----------------|-------------|----------
--paper-tabs-selection-bar-color| color selection bar |--paper-yellow-a100--paper-tabs| mixin applied tabs |{}
but cannot undderstand wher use this, or how use. can give me basic example?
thanks in advance
polymer 1.0 introduced concepts of custom css properties , custom css mixins.
rather exposing details of element’s internal implementation theming, instead element author defines 1 or more custom css properties part of element’s api.
these custom properties can defined other standard css properties , inherit point of definition down composed dom tree, similar effect of
color,font-family.
it may tedious (or impossible) element author anticipate , expose every possible css property may important theming element individual css properties (for example, if user needed adjust
opacityof toolbar title?).for reason, custom properties shim included in polymer includes experimental extension allowing bag of css properties defined custom property , allowing properties in bag applied specific css rule in element’s local dom. this, introduce mixin capability analogous
var, allows entire bag of properties mixed in.
checkout links learn more. below find simple example contains paper-tabs element , custom styles.
<!doctype html> <html> <head> <title>paper tabs style example</title> <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> <link rel="import" href="bower_components/polymer/polymer.html" /> <link rel="import" href="bower_components/paper-tabs/paper-tabs.html" /> <style is="custom-style"> :root { --my-custom-color: red; --paper-tab-ink: var(--my-custom-color); /* custom css property */ --paper-tabs-selection-bar-color: blue; /* custom css mixin */ --paper-tabs: { color: var(--default-primary-color); /* variable defined in default-theme.html */ font-size: 20px; } } </style> </head> <body> <paper-tabs selected="0"> <paper-tab>tab 1</paper-tab> <paper-tab>tab 2</paper-tab> <paper-tab>tab 3</paper-tab> </paper-tabs> </body> </html> key parts example:
- for styles in main document can use
<style is="custom-style">. - you can create own custom css variables
--custom-color: red;, use them--paper-tab-ink: var(--custom-color);. - you can assign valid, appropriate css defined custom css property
--paper-tabs-selection-bar-color: blue;or--paper-tabs-selection-bar-color: rgba(0,255,0,0.5);. - many elements include predefined css variables.
paper-styles, example, includescolor.html,default-theme.html. these files define various css variables colors can used customize style of elements.--default-primary-color1 of these variables. see below.
/* custom css mixin */ --paper-tabs: { color: var(--default-primary-color); /* variable defined in default-theme.html */ font-size: 20px; } 
Comments
Post a Comment