Comment le style a <papier-entrée> tag en Polymère 1.0

Comment faites-vous le style de la <paper-input> tag en Polymère 1.0

Pouvez-vous montrer comment spécifiquement style personnalisé le texte de l'étiquette de la couleur, de la couleur de soulignement, d'entrée la couleur du texte et la façon d'y accéder en utilisant custom-style?

Ceci la vidéo de la Polycasts série est une introduction aux éléments de thématisation.

OriginalL'auteur Jenish J | 2015-06-03

  1. 36

    Vous pouvez changer l'apparence de <paper-input> en modifiant les propriétés personnalisées répertoriés sur ici (L'information a été déplacé pour la version la plus récente - il est disponible pour les versions antérieures à la version v1.1.21).

    Voici un exemple:

    <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>

    EDIT:

    La :root sélecteur est utilisé pour définir propriétés personnalisées qui s'appliquent à tous les éléments personnalisés. Vous pouvez également cibler un élément spécifique au lieu de :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>
    Nice. Cela fonctionne bien. Quelle est la meilleure pratique autour de l'organisation de cette? Mettez-vous cela dans un fichier séparé et de l'utilisation d'une importation HTML? Aussi, ce qui ne l' :root signifie? Cela peut-il être changé en quelque chose d'autre? Par exemple, l'associer à une classe ou un id? Merci!
    Vous pouvez mettre ceci dans un fichier séparé. :root sélecteur est utilisé pour définir des propriétés personnalisées qui s'appliquent à tous les éléments personnalisés. Vous pouvez cibler un élément spécifique, par exemple, paper-input.my-class { ... }, au lieu de root:. Voir polymer-project.org/1.0/docs/devguide/styling.html#custom-style
    Pouvez-vous ajouter un mixin pour les exemples?

    OriginalL'auteur Mikael E. Wikner