Polymer 1.0 ha introdotto i concetti di proprietà CSS personalizzate e mixins CSS personalizzato.
Custom CSS properties
anziché esporre i dettagli di implementazione interna di un elemento per la tematizzazione, invece un elemento autore definisce una o più proprietà CSS personalizzato come parte della API dell'elemento.
Queste proprietà personalizzate possono essere definite in modo simile ad altri standard di CSS proprietà e erediteranno dal punto di definizione lungo il composto albero DOM, simile all'effetto di color e font-family.
Custom CSS mixins
Può essere noioso (o impossibile) per un autore elemento di anticipare ed esporre tutte le proprietà possibili CSS che può essere importante per tematizzazione di un elemento come proprietà individuale CSS (ad esempio, che cosa succede se un utente deve modificare per il opacity del titolo della barra degli strumenti?).
Per questo motivo, le proprietà personalizzate Shim compresi nel Polymer include un'estensione sperimentale che permette un sacco di proprietà CSS per essere definito come una proprietà personalizzata e permettere tutte le proprietà nella borsa da applicare a una regola CSS specifica nel DOM locale di un elemento. Per questo, si introduce una capacità intermedia che è analoga a var, ma permette un intero sacchetto di immobili da miscelare in.
Cassa i collegamenti per ulteriori informazioni. Di seguito troverai un semplice esempio che contiene l'elemento paper-tabs e gli stili personalizzati.
<!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>
parti chiave di questo esempio:
- Per gli stili nel documento principale è possibile utilizzare
<style is="custom-style">.
- È possibile creare variabili CSS personalizzate come
--custom-color: red; e utilizzarle come --paper-tab-ink: var(--custom-color);.
- È possibile assegnare qualsiasi CSS valido e appropriato a una proprietà personalizzata personalizzata come
--paper-tabs-selection-bar-color: blue; o --paper-tabs-selection-bar-color: rgba(0,255,0,0.5);.
- Molti elementi includono variabili CSS predefinite.
paper-styles, ad esempio, include color.html e default-theme.html. Questi file definiscono varie variabili CSS per i colori che possono essere utilizzati per personalizzare lo stile degli elementi. --default-primary-color è una di queste variabili. Vedi sotto.
/* custom CSS mixin */
--paper-tabs: {
color: var(--default-primary-color); /* variable defined in default-theme.html */
font-size: 20px;
}
Dovrebbe essere spiegato come questo nei documenti ufficiali imo. Grazie! –