Uso di stili di carta Polymer 1.0 Elemento

Sfortunatamente, sto trovando la documentazione/gli esempi attuali per l'uso di stili di carta un po 'carenti. Non sono un esperto di CSS (relativamente newbie in realtà), quindi potrei davvero usare esempi di come implementare lo stile di applicazione di Polymer 1.0 per poter essere utilizzato da tutti gli elementi personalizzati (cioè applicando le classi a qualsiasi tag in quelli locali di quell'elemento personalizzato). Ho fatto questo genere di cose relativamente facilmente in Polymer 0.5 usando gli stili core, ma è cambiato abbastanza in 1.0 per confondermi, in particolare senza documenti/esempi completi su cui lavorare. Sembra anche che ci possano essere alcuni modi per farlo. Mi chiedo anche se gli stili di carta siano ancora considerati sperimentali in 1.0? Non ci sono documenti o esempi per il suo uso nel catalogo di elementi online di polimeri 1.0 (https://elements.polymer-project.org/elements/paper-styles), anche se ho trovato "alcuni" sul suo repository gitHub.Uso di stili di carta Polymer 1.0 Elemento

fonte

2015-07-16 sinjins

'paper-styles' è simile a un file' app-theme.html'. Basta importarlo sul tuo progetto e le proprietà personalizzate che definisce saranno applicate e/o possono essere utilizzate. –

Una cosa che si può fare quando manca la documentazione è cercare attraverso altri progetti che stanno usando il codice che si desidera utilizzare. paper-tabs, ad esempio, utilizza paper-styles. È possibile vedere un esempio di importazione di paper-styles/color.html in paper-tabs.html. Il valore --paper-yellow-a100 viene utilizzato in paper-tabs.html. Di seguito è riportato un esempio di utilizzo di varie variabili CSS (var) e mixin (@apply) definite in paper-styles per applicare lo stile al documento principale.

<!DOCTYPE html> 
<html> 
<head> 
    <title>paper-styles 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-styles/paper-styles.html" /> 
    <style is="custom-style"> 
     .shadow { 
      @apply(--shadow-elevation-16dp); 
     } 

     section { 
      background-color: var(--google-blue-700); 
     } 

     p { 
      @apply(--paper-font-display3); 
     } 
    </style> 
</head> 
<body> 
    <section class="shadow"> 
     <h1>Example</h1> 
     <p> 
      This is an example using <em>paper-styles</em>. 
     </p> 
    </section> 
</body> 
</html>

Click here to learn more about styling in Polymer 1.0.

Per quanto riguarda le tue domande su carta-stili essendo sperimentale, sulla Polymer home page in the catalog section afferma:

elementi personalizzati, costruiti dal team Polymer, pronto per l'uso nel vostro applicazioni.

Tuttavia, in varie posizioni sul sito, tra cui styling, ci sono menzioni di funzionalità sperimentali.

le proprietà personalizzate spessoramento incluse in polimero include un'estensione sperimentale

In questo momento utilizzando @apply sarebbe considerato sperimentale.

C'è una pagina sul sito Web Polymer denominata Experimental features & elements che è possibile cercare per ulteriori informazioni.

fonte

2015-07-17 18:58:21 coderfin

Il malinteso generale sembra essere che, semplicemente importando l'elemento paper-styles, il documento viene stilizzato in base alle specifiche di progettazione del materiale. Questo non è il caso.

Hai solo tutte le variabili e mixin.

Quindi è necessario applicarli a ciascun elemento all'interno del proprio elemento personalizzato nel modo in cui lo si vede.

Ecco un elemento di esempio:

<dom-module id="demo-element"> 
    <template> 
     <style> 
      :host { 
       display: block; 
       background: var(--paper-blue-500); 
       padding: 20px; 
      } 

      .title { @apply(--paper-font-title); } 

      button { @apply(--paper-font-button); }  
     </style> 

     <h1 class="title">Hello World</h1> 

     <button>Demo</button> 

    </template> 
    <script> 
     Polymer({ 
      is: 'demo-element' 
     }); 
    </script> 
</dom-module>

Per fortuna gli stili sono ben strutturati all'interno soli quattro file tra solo un paio di centinaia di linee di massima.

fonte

2015-11-15 00:56:35 LoveAndHappiness

Uso di stili di carta Polymer 1.0 Elemento

risposta

Problemi correlati