Menu
im trying to learn Polymer, but i cannot understand how to style elements in version 1.0. The exemple just show this..
Custom property | Description | Default ----------------|-------------|----------
--paper-tabs-selection-bar-color| Color for the selection bar |--paper-yellow-a100--paper-tabs| Mixin applied to the tabs |{}
But i cannot to undderstand wher i use this, or how i use. Someone can give me a basic example?
thanks in advance
338
Polymer 1.0 introduced the concepts of custom CSS properties and custom CSS mixins.
Custom CSS properties
Rather than exposing the details of an element’s internal implementation for theming, instead an element author defines one or more custom CSS properties as part of the element’s API.
These custom properties can be defined similarly to other standard CSS properties and will inherit from the point of definition down the composed DOM tree, similar to the effect of
colorandfont-family.
Custom CSS mixins
It may be tedious (or impossible) for an element author to anticipate and expose every possible CSS property that may be important for theming an element as individual CSS properties (for example, what if a user needed to adjust the
opacityof the toolbar title?).For this reason, the custom properties shim included in Polymer includes an experimental extension allowing a bag of CSS properties to be defined as a custom property and allowing all properties in the bag to be applied to a specific CSS rule in an element’s local DOM. For this, we introduce a mixin capability that is analogous to
var, but allows an entire bag of properties to be mixed in.
Checkout the links to learn more. Below you will find a simple example that contains the paper-tabs element and 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 to this example:
<style is="custom-style">.--custom-color: red; and use them like --paper-tab-ink: var(--custom-color);.--paper-tabs-selection-bar-color: blue; or --paper-tabs-selection-bar-color: rgba(0,255,0,0.5);.paper-styles, for example, includes color.html and default-theme.html. These files define various CSS variables for colors that can be used to customize the style of elements. --default-primary-color is one of these variables. See below./* custom CSS mixin */
--paper-tabs: {
color: var(--default-primary-color); /* variable defined in default-theme.html */
font-size: 20px;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
