Jak nadać styl <paper-input> tag w Polymer 1,0

Question

Jak projektować tag <paper-input> w Polymer 1,0

można pokazać, jak konkretnie niestandardowy styl kolor etykiety tekst, kolor podkreślenia, wejście kolor tekstu i jak uzyskać do nich dostęp za pomocą custom-style?

Answer 1

Możesz zmienić wygląd <paper-input>, zmieniając niestandardowe właściwości wymienione na here (Informacje zostały przeniesione do najnowszej wersji - jest dostępna dla wersji starszych niż v1.1.21).

Oto przykład:

<style is="custom-style"> 
:root { 
     /* Label and underline color when the input is not focused */ 
     --paper-input-container-color: red; 

     /* Label and underline color when the input is focused */ 
     --paper-input-container-focus-color: blue; 

     /* Label and underline color when the input is invalid */ 
     --paper-input-container-invalid-color: green; 

     /* Input foreground color */ 
     --paper-input-container-input-color: black; 
} 
</style> 

Edycja:

Selektor :root służy do określenia custom properties that apply to all custom elements. można także kierować do konkretnego elementu zamiast :root:

<style is="custom-style"> 
    paper-input-container.my-class { 
     --paper-input-container-color: red; 
     --paper-input-container-focus-color: blue; 
     --paper-input-container-invalid-color: green; 
     --paper-input-container-input-color: black; 
    } 
</style>