Пользовательские свойства CSS в Ionic 4: background-hover

Я пытаюсь изменить цвет фона при наведении курсора на элемент ion внутри списка ion. Работа в ионном режиме 4.

Я создал список с помощью * ngFor = "let ....". Внутрь я кладу свои ионные предметы. Список работает отлично. Но я не могу понять, почему работают только некоторые из настраиваемых свойств CSS ionic. Например, я не могу заставить --background-hover что-либо делать.

См. Страницу документации ionic для элемента ion. Здесь показан полный список настраиваемых свойств css: https://ionicframework.com/docs/api/item < / а>.

В файле .html:

<ion-list>
  <ion-item  *ngFor="let item of animateItems; let i = index;">
     [-- contents of item --]
  </ion-item>
</ion-list>

В файле .scss это не работает.

ion-item {
    --background-hover: #cccccc;
}

Однако это действительно работает:

ion-item {
    --background: #eeeeee;
}

Основываясь на моем понимании свойства CSS --background-hover, я ожидаю, что элемент ion станет серым, когда я наведу на него указатель мыши. Кто-нибудь знает, что я делаю не так или почему это не работает согласно документации ionic.


css ionic4 theming
person monkey    schedule 03.07.2019    source источник
comment
Может ошибка. Поведение ion-item также зависит от того, что находится внутри него (например, если вы добавляете другие входы, такие как ion-select или ion-toggle и т. д. - компонент добавляет входную крышку.). Поэтому, пожалуйста, обновите свой вопрос, указав фактические внутренности ионного элемента в вашем случае.   -  person Sergey Rudenko    schedule 04.07.2019

Ответы (2)


arrow_upward
2
arrow_downward

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

В файле item.scss вы обнаружите, что --background-hover используется, когда в элементе существует класс .ion-activatable:

@media (any-hover: hover) {
  :host(.ion-activatable:hover) .item-native {
    background: var(--background-hover);
    color: var(--color-hover);
  }

  :host(.ion-color.ion-activatable:hover) .item-native {
    background: #{current-color(tint)};
    color: #{current-color(contrast)};
  }
}

Я тестирую его, проверяя элемент в Chrome Inspector, добавляю класс к элементу, наведу на него курсор, и он работает. Вопрос в том, как этот класс добавляется к элементу. Вы можете найти его в item.js и увидеть, что он добавлен на основе переменной canActivate, которая устанавливается функцией canActivate.

// If the item contains an input including a checkbox, datetime, select, or radio
// then the item will have a clickable input cover that covers the item
// that should get the hover, focused and activated states UNLESS it has multiple
// inputs, then those need to individually get each click
hasCover() {
    const inputs = this.el.querySelectorAll('ion-checkbox, ion-datetime, ion-select, ion-radio');
    return inputs.length === 1 && !this.multipleInputs;
}
// If the item has an href or button property it will render a native
// anchor or button that is clickable
isClickable() {
    return (this.href !== undefined || this.button);
}
canActivate() {
    return (this.isClickable() || this.hasCover());
}
render() {
    ...
    const canActivate = this.canActivate();
    ...
}

Как подсказывает код, он должен быть интерактивным или иметь обложку. Элемент не принадлежит к списку item has cover: ion-checkbox, ion-datetime, ion-select, ion-radio, поэтому самый простой способ (без изменения кода библиотеки) - сделать его интерактивным, добавив href. Вы можете изменить свой код примерно так, и он должен работать:

<ion-list>
  <ion-item *ngFor="let item of animateItems; let i = index;" [href]="item.href">
     [-- contents of item --]
  </ion-item>
</ion-list>

Значение href может быть javascript:;, если у вас его нет

person Truyen Le    schedule 02.01.2020

arrow_upward
2
arrow_downward

Чтобы добавить к ответу Труйена, если вы добавите атрибут button = "true" к:

<ion-item button="true">...</ion-item>

Затем фактически вступают в силу переменные при наведении курсора.

person raymondboswel    schedule 26.05.2020