Как оформить тег ‹paper-input› в Polymer 1.0

Как оформить тег <paper-input> в Polymer 1.0?

Можете ли вы показать, как конкретно настроить цвет текста метки, цвет подчеркивания, цвет входного текста и как получить к ним доступ с помощью custom-style?


polymer-1.0
person Jenish J    schedule 03.06.2015    source источник
comment
Это видео из серии Polycasts представляет собой введение в элементы тем.   -  person Ben Thomas    schedule 04.06.2015

Ответы (1)


arrow_upward
37
arrow_downward

Вы можете изменить внешний вид <paper-input>, изменив пользовательские свойства, перечисленные в сюда (информация перемещена для самой последней версии - она ​​доступна для версий старше v1.1.21).

Вот пример:

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

ИЗМЕНИТЬ:

Селектор :root используется для определения пользовательских свойств, которые применяются ко всем пользовательские элементы. Вы также можете настроить таргетинг на определенный элемент вместо :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>
person Mikael E. Wikner    schedule 03.06.2015
comment
Ницца. Это хорошо работает. Какова наилучшая практика организации этого? Вы помещаете это в отдельный файл и используете импорт HTML? Кроме того, что означает :root? Можно ли это изменить на что-то другое? Например, связать его с определенным классом или идентификатором? Спасибо! - person Con Antonakos; 14.06.2015
comment
@ConAntonakos Вы можете поместить это в отдельный файл. Селектор :root используется для определения пользовательских свойств, которые применяются ко всем пользовательским элементам. Вы можете настроить таргетинг на определенный элемент, например, paper-input.my-class { ... } вместо root:. См. polymer-project.org/1.0/docs/devguide. /styling.html#пользовательский стиль - person Frederik Krautwald; 02.07.2015
comment
Можете ли вы добавить миксин к примерам? - person Max Waterman; 24.08.2017