Polymer 1.0 eingeführt, um die Konzepte von benutzerdefinierten CSS-Eigenschaften und benutzerdefinierte CSS Mixins.
Custom CSS properties
Anstatt die Details eines Elements internen Implementierung für Theming aussetzt, sondern ein Element Autor ein oder mehr benutzerdefinierte CSS-Eigenschaften als Teil der API-Element definiert.
Diese benutzerdefinierten Eigenschaften kann ähnlich wie andere Standard CSS Eigenschaften definiert werden und vom Punkt der Definition auf den zusammengesetzt DOM-Baum, ähnlich die Wirkung von color und font-family erbt.
Custom CSS mixins
Es kann langweilig (oder unmöglich) sein, für ein Element Autor und setzen alle möglichen CSS-Eigenschaft zu antizipieren, die für Thematisierung ein Element als einzelne CSS-Eigenschaften von Bedeutung sein können (zum Beispiel, was, wenn ein Benutzer benötigt, um die opacity des Symbolleistentitels zu justieren?).
Aus diesem Grunde Shim die benutzerdefinierten Eigenschaften in Polymer enthält eine experimentelle Erweiterung umfasst eine Tasche von CSS-Eigenschaften zu ermöglicht als benutzerdefinierte Eigenschaft definiert werden und damit alle Eigenschaften in der Tasche auf eine bestimmte CSS-Regel angewandt werden im lokalen DOM eines Elements. Für dieser führen wir eine mixin Fähigkeit, die var analog ist, aber ermöglicht eine ganze Tüte Eigenschaften in gemischt werden.
Kasse die Links, um mehr zu erfahren. Im Folgenden finden Sie ein einfaches Beispiel, das das Element paper-tabs und benutzerdefinierte Stile enthält.
<!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 Teile in diesem Beispiel:
- Für Stile im Hauptdokument Sie
<style is="custom-style"> verwenden können.
- Sie können Ihre eigenen benutzerdefinierten CSS-Variablen wie
--custom-color: red; erstellen und sie wie --paper-tab-ink: var(--custom-color); verwenden.
- Sie können einer definierten benutzerdefinierten Eigenschaft wie
--paper-tabs-selection-bar-color: blue; oder --paper-tabs-selection-bar-color: rgba(0,255,0,0.5); ein gültiges, passendes CSS zuweisen.
- Viele Elemente enthalten vordefinierte CSS-Variablen. Beispielsweise umfasst
paper-stylescolor.html und default-theme.html. Diese Dateien definieren verschiedene CSS-Variablen für Farben, die zum Anpassen des Stils von Elementen verwendet werden können. --default-primary-color ist eine dieser Variablen. Siehe unten.
/* custom CSS mixin */
--paper-tabs: {
color: var(--default-primary-color); /* variable defined in default-theme.html */
font-size: 20px;
}
Es sollte imo in den offiziellen Dokumenten wie folgt erklärt werden. Vielen Dank! –