В Polymer я могу сделать динамически созданную бумажную кнопку, меняющую цвет, когда я нажимаю на нее? - PullRequest
Новая
       35

В Polymer я могу сделать динамически созданную бумажную кнопку, меняющую цвет, когда я нажимаю на нее?

1 голос
/ 20 июня 2019

Я пытаюсь изменить цвет бумажной кнопки, которая создается динамически с помощью элемента <template is="dom-repeat">.Допустим, у меня есть этот фрагмент кода: 

<template is="dom-repeat" items="{{items}}" as="item">
  Itemnumber: [[item.number]] is [[item.height]].
  <paper-button on-click="setHigh">High</paper-button>
  <paper-button on-click="setLow">Low</paper-button>
</template>

Теперь, когда я нажимаю, например, кнопку «Высокий», я хочу, чтобы цвет фона этой кнопки изменился, и я хочу, чтобы цвет фонаКнопка «Низкая» также поменяется.Элементы Array хранятся локально, и я смог сделать что-то похожее, используя этот код: 

<template is="dom-repeat" items="{{items}}" as="item">
  Itemnumber [[item.number]] is [[item.height]].
  <template is="dom-if" if="[[isHigh(item)]]">
    <paper-button on-click="setHigh" class="active">High</paper-button>
    <paper-button on-click="setLow">Low</paper-button>
  </template>
  <template is="dom-if" if="[[!isHigh(item)]]">
    <paper-button on-click="setHigh">High</paper-button>
    <paper-button on-click="setLow" class="active">Low</paper-button>
  </template>
</template>

Теперь каждый элемент, который возвращает isHigh (item) как true, будет частью активного класса (который яиспользовать для стилизации цвета фона), и false не будет частью этого класса.Это работает, когда я впервые загружаю страницу, однако, когда я нажимаю кнопки и изменяется массив Items, я должен сначала перезагрузить страницу, чтобы стили вступили в силу.Атрибут item.height обновляется немедленно.

1 Ответ

2 голосов
/ 21 июня 2019

Я бы предложил добавить контейнер вокруг двух кнопок, к которым вы добавляете класс, который окрашивает кнопки.Делать это с помощью css намного легче для вашего приложения, поскольку ему не нужно вызывать getHigh при нажатии кнопок. 

<template is="dom-repeat" items="{{items}}" as="item">
  <div class="button-container">
  Itemnumber [[item.number]] is [[item.height]].
    <paper-button on-click="setHigh" class="high">High</paper-button>
    <paper-button on-click="setLow" class="low">Low</paper-button>
</div>
</template>

Затем заставьте функции добавлять и удалять класс в div вокруг них

setHigh(e) {
  e.currentTarget.classList.add("high")
}

setLow(e) {
  e.currentTarget.classList.remove("high")
}

И в вашем css: 

.button-container .high {
  background-color: green;
}

.button-container .low {
  background-color: red;
}

/* When high is pressed */
.button-container.high .high {
  background-color: red;
}

.button-container.high .low {
  background-color: green;
}
...