Как получить цвет текущей угловой темы определенного компонента (например, фон при наведении курсора кнопки)? - PullRequest
Новая
       27

Как получить цвет текущей угловой темы определенного компонента (например, фон при наведении курсора кнопки)?

0 голосов
/ 02 мая 2019

Я хочу, чтобы в списке, отображаемом с Angular 7 и дизайном материала, отображался цвет при наведении.Так как цвета $primary, $accent и $warn не очень хорошо подходят для этой цели, я хочу получить тот же цвет для зависания, что и кнопка при наведении.В настоящее время я использую candy-app-theme и dark-theme из примера создания нескольких материалов , поэтому я не определяю этот цвет самостоятельно.

Для определения моего зависанияцвет Мне нужно запросить цвет кнопки, однако.Поэтому: Как мне запросить этот цвет? 

@mixin options-component-theme($theme) {
    $primary: map-get($theme, primary);
    $accent: map-get($theme, accent);// Use mat-color to extract individual colors from a palette as necessary.

    //i have tried these two:
    $hover: map-get($theme, hover);
    $focused-button: map-get($theme, focused-button);

    $primary-color: mat-color($primary);
    $accent-color: mat-color($accent);

    .listItemFormat:hover {
    background-color: $focused-button;

}

Я пытался получить цвета через hover и focused-button, , как указано в этом ответеTimTheEnchanter , однако это не работает (у меня вообще нет видимого эффекта зависания).

1 Ответ

1 голос
/ 02 мая 2019

Мое предположение о получении цвета непосредственно из темы было неверным, мне сначала нужно было получить палитру.Таким образом, правильный способ сделать это - запросить (в моем случае с цветом сфокусированной кнопки) палитру background и получить цвет focused-button из указанной палитры.

Код из вопроса имеетчтобы быть настроенным таким образом: 

@import '~@angular/material/theming';

@mixin options-component-theme($theme) {

    $primary: map-get($theme, primary);
    $accent: map-get($theme, accent);// Use mat-color to extract individual colors from a palette as necessary.

    $background-palette: map-get($theme, background);

    $primary-color: mat-color($primary);
    $accent-color: mat-color($accent);
    $focused-button-color: mat-color($background-palette, focused-button);

   .listItemFormat:hover {
    background-color: $focused-button-color;
   }
}

Для полноты вопроса, вот копия списка в ответе, на который я ссылался в моем исходном вопросе:

Для полноты здесьВот списки элементов, которые вы можете получить из разных палитр: Из «основной» палитры ($ primary и $ dark-p в моем коде выше):

  • default
  • светлее
  • темнее

Вы также можете получить эти три значения цвета для палитр $ accent и $ warn.

Из палитры "передний план" ($ light-foreground-palette и $ dark-foreground-palette в моем коде выше):

  • base
  • делитель
  • делитель
  • отключен
  • отключенная кнопка
  • отключенный текст
  • текст подсказки
  • вторичный текст
  • icon
  • icons
  • text
  • слайдер выключен
  • слайдер выключен-активен

Из палитры "background" ($ light-background-palette и $ dark-background-palette в моем коде выше):

  • строка состояния
  • панель приложения
  • фон
  • наведение
  • карта
  • диалоговое окно
  • отключенная кнопка
  • повышенная кнопка
  • кнопка с фокусировкой
  • кнопка с выбранным значением
  • кнопка с выбранным отключением
  • кнопка с отключенной кнопкой
...