Динамически назначать стили элементу DOM в Polymer 3.0 - PullRequest
Новая
       8

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

0 голосов
/ 18 февраля 2019

Я впервые создаю компонент в 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?Если такого нет, как лучше это сделать?

1 Ответ

0 голосов
/ 19 февраля 2019

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

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

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

...