Динамическое назначение стилей элементу DOM в Polymer 3.0

Я впервые создаю компонент в Polymer 3.0, и мне было интересно, как динамически назначать стили элементу DOM. Я строю горизонтальную хронологию событий и хочу размещать вертикальные маркеры каждый год в заданном диапазоне. В Vue.js я бы сделал что-то вроде этого:

<year-marker v-for="(year, index) in years" :style="getPercentFromLeft(year)" :key="index"></year-marker>

В этой настройке у меня будет структура данных со всеми годами, которые я хочу отобразить, и v-for будет циклически проходить эту структуру данных и отображать маркеры для каждого года. Функция getPercentFromLeft будет вычислять процент от левой стороны экрана, в котором должен располагаться маркер. Возвращаемое значение имеет формат {left: 10%}. У year-marker есть дополнительные стили, но они указаны в разделе стилей.

Каков эквивалентный способ сделать это в Polymer 3.0? Если его нет, то как лучше это сделать?


vue.js polymer polymer-3.x
person rafafan2010    schedule 18.02.2019    source источник
comment
Да, у вас могут быть итерации и вычисляемые стили для дочерних элементов в Polymer, это просто другой синтаксис, проверьте документы. Есть несколько вариантов, например, polymer-library.polymer-project .org/3.0/api/elements/dom-repeat (чистый полимер) или просто JS в освещенных шаблонах, если вы планируете их использовать.   -  person mishu    schedule 18.02.2019

Ответы (1)


arrow_upward
1
arrow_downward

В полимере3 вы можете добиться этого, используя приведенный ниже код. Перебор вашей структуры данных и вычисление стилей для каждого элемента.

<dom-repeat items="{{years}}"> 
    <template> 
        <paper-item class$={{getPercentFromLeft(year)}}>{{item}}</paper-item> 
    </template> 
</dom-repeat>

getPercentFromLeft будет вызываться для каждого элемента (года), и вы можете вернуть требуемый класс.

person Vin    schedule 19.02.2019