Как изменить цвет фона кнопки при нажатии на нее? - PullRequest
Новая
       0

Как изменить цвет фона кнопки при нажатии на нее?

1 голос
/ 24 февраля 2020

Я начинаю с angular, и я разрабатываю с моими коллегами по стажировке приложение-каталог, вот моя проблема:

У меня есть такие маленькие кнопки в меню:

btn menu

, и я хочу, чтобы при нажатии на одну из его кнопок его фон был окрашен в оранжевый цвет, например, такой:

btn color

Изображение доступно

Как вы можете видеть здесь, я нажал кнопку «Домой», и она вернула меня на домашнюю страницу, а кнопка «Домой», ее фон хорошо окрашен в оранжевый цвет.

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

вот код моего компонента . html: 

<div class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
    <ul class="nav sidebar-nav">
        <li class="dropdown activ"><a class="dropdown-toggle" [routerLink]="['home']" class="active" data-toggle="dropdown"><i class="fa fa-fw fa-home"></i> Accueil </a></li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-fw fa-search"></i> recherche <span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
            <li class="element"><a [routerLink]="['nonRelationEntity']"><i class="fa fa-fw fa-angle-right "></i> entités sans relations</a></li>
        </ul></li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-fw fa-book"></i> catalogue <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
                <li class="element"><a [routerLink]="['entity']"><i class="fa fa-fw fa-angle-right "></i> entité</a></li>
                <li class="element"><a [routerLink]="['relation']"><i class="fa fa-fw fa-angle-right "></i> relation</a></li>
                <li class="element"><a [routerLink]="['gestionCatalogue']"><i class="fa fa-fw fa-angle-right "></i> gestion catalogue</a></li>
            </ul></li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-fw fa-exchange-alt"></i> mapping <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
                <li class="element"><a [routerLink]="['profileMapping']"><i class="fa fa-fw fa-angle-right "></i> mapping des profiles</a></li>
                <li class="element"><a [routerLink]="['profile']"><i class="fa fa-fw fa-angle-right "></i> profile</a></li>
                <li class="element"><a [routerLink]="['scopeMapping']"><i class="fa fa-fw fa-angle-right "></i> mapping des scopes</a></li>
                <li class="element"><a [routerLink]="['scope']"><i class="fa fa-fw fa-angle-right "></i> scope</a></li>
            </ul></li>
        <li *ngIf="edit" class="element"><a [routerLink]="['import']"><i class="fa fa-fw fa-arrow-alt-circle-up  "></i> import</a></li>
        <li class="element"><a [routerLink]="['export']"><i class="fa fa-fw fa-arrow-alt-circle-down  "></i> export</a></li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-fw fa-cogs"></i> administration <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
                <li class="element"><a [routerLink]="['catalog']"><i class="fa fa-fw fa-angle-right "></i> catalogue</a></li>
                <li class="element"><a [routerLink]="['mappingType']"><i class="fa fa-fw fa-angle-right "></i> type de mapping</a></li>
                <li class="element"><a [routerLink]="['mappingSystem']"><i class="fa fa-fw fa-angle-right "></i> système de mapping</a></li>
                <li class="element"><a [routerLink]="['entityType']"><i class="fa fa-fw fa-angle-right "></i> type d'entité</a></li>
                <li class="element"><a [routerLink]="['relationType']"><i class="fa fa-fw fa-angle-right "></i> type de relation</a></li>
                <li class="element"><a [routerLink]="['propertyType']"><i class="fa fa-fw fa-angle-right "></i> propriété</a></li>
                <li class="element"><a [routerLink]="['mappingContext']"><i class="fa fa-fw fa-angle-right "></i> contextes de mapping</a></li>         
                <li *ngIf="admin" class="element"><a [routerLink]="['users']"><i class="fa fa-fw fa-angle-right "></i> gestion des utilisateurs</a></li>
                <li class="element"><a [routerLink]="['version']"><i class="fa fa-fw fa-angle-right "></i> gestion de versions</a></li> 
            </ul>
        </li>
    </ul>
</div>

и вот код для моего component.ts: 

import { Component } from '@angular/core';
import { RouterModule, Router, Routes } from '@angular/router';
declare var $: any;

@Component({
    selector: 'side-menu',
    templateUrl: './side-menu.component.html',
    styleUrls: ['./side-menu.component.css']
})
export class sideMenuComponent {
    admin : boolean = false;
    edit : boolean = true;
    ngOnInit(){
        if(localStorage.getItem('role')=="ROLE_ADMIN"){
            this.admin = true;
        }
        if(localStorage.getItem('role')=="ROLE_VIEW"){
            this.edit = false;
        }
    }

    ngAfterViewInit() {
        $(document).on('click', '.element', function (e) {
            $('.element.activ').toggleClass('activ');
            $(this).toggleClass('activ');
        });

        $(document).on('click', '.sidebar-nav li a', function (e) {
            $('.element.activ').toggleClass('activ');
        });

        $(document).on('click', ':not(.sidebar-nav li.open a)', function (e) {
            e.stopPropagation();
        });
/* remove if classe is active */
        $('.nav a').on('click', function () {
            $('.nav').find('.activ').removeClass('activ');
        });
    }
}

и вот мой css код: 

  /*.woll {
    margin-bottom: -21px;
}

.ssilka a{
    color:#0080C0;
}

.ssilka a:hover{
    color:#0080C0;
}

.list-group-item:last-child {
    border-radius: 0;
}

.list-group-item:first-child{
    border-radius: 0;
}
.side-menu{
    width: 20%;
}*/
#sidebar-wrapper { 
  -moz-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  -webkit-transition: all 0.25s ease;
  background: #222;
  height: 100%;
  width: 180pt;
  left: 180pt;
  margin-left: -180pt;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
  z-index:-5;
}
#sidebar-wrapper::-webkit-scrollbar {
  display: none;
}
#sidebar-wrapper.toggled{
    left:0;
}

.nav .open > a { background-color: transparent; }

.nav .open > a:hover { background-color: transparent; }

.nav .open > a:focus { background-color: transparent; }

.sidebar-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 70pt;
  width: 180pt;
}

.sidebar-nav li {
  display: inline-block;
  line-height: 14pt;
  position: relative;
  width: 100%;
}

.sidebar-nav li:before {
  -moz-transition: width 0.2s ease-in;
  -ms-transition: width 0.2s ease-in;
  -webkit-transition: width 0.2s ease-in;
  background-color: #1c1c1c;
  content: '';
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  -webkit-transition: width 0.2s ease-in;
  transition: width 0.2s ease-in;
  width: 3pt;
  z-index: -1;
}

/*.sidebar-nav li:first-child a {
  background-color: #222;
  color: #ffffff;
}*/

.sidebar-nav li:nth-child(1):before, .sidebar-nav li:nth-child(1).open, .sidebar-nav li:nth-child(1).activ { background-color: #F55000; }

.sidebar-nav li:nth-child(2):before, .sidebar-nav li:nth-child(2).open, .sidebar-nav li:nth-child(2).activ { background-color: #F6590D; }

.sidebar-nav li:nth-child(3):before, .sidebar-nav li:nth-child(3).open, .sidebar-nav li:nth-child(3).activ  { background-color: #F7621A; }

.sidebar-nav li:nth-child(4):before, .sidebar-nav li:nth-child(4).open, .sidebar-nav li:nth-child(4).activ  { background-color: #F86B27; }

.sidebar-nav li:nth-child(5):before, .sidebar-nav li:nth-child(5).open, .sidebar-nav li:nth-child(5).activ  { background-color: #F97435; }

.sidebar-nav li:nth-child(6):before, .sidebar-nav li:nth-child(6).open, .sidebar-nav li:nth-child(6).activ  { background-color: #FA7D42; }

.sidebar-nav li:nth-child(7):before, .sidebar-nav li:nth-child(7).open, .sidebar-nav li:nth-child(7).activ  { background-color: #FB864F; }

.sidebar-nav li:nth-child(8):before, .sidebar-nav li:nth-child(8).open, .sidebar-nav li:nth-child(8).activ  { background-color: #FC8F5D; }

.sidebar-nav li:nth-child(9):before, .sidebar-nav li:nth-child(9).open, .sidebar-nav li:nth-child(9).activ  { background-color: #FD986A; }

.sidebar-nav li:nth-child(10):before, .sidebar-nav li:nth-child(10).open, .sidebar-nav li:nth-child(10).activ  { background-color: #FEA177; }

.sidebar-nav li:nth-child(11):before, .sidebar-nav li:nth-child(11).open, .sidebar-nav li:nth-child(11).activ  { background-color: #FFAB85; }

.sidebar-nav li:hover:before {
  -webkit-transition: width 0.2s ease-in;
  transition: width 0.2s ease-in;
  width: 100%;
}

.sidebar-nav li a {
  color: #dddddd;
  display: block;
  padding: 7pt 10pt 7pt 20pt;
  text-decoration: none;
}

.sidebar-nav li.open:hover before {
  -webkit-transition: width 0.2s ease-in;
  transition: width 0.2s ease-in;
  width: 100%;
}

.sidebar-nav .dropdown-menu {
  background-color: #333;
  border-radius: 0;
  border: none;
  box-shadow: none;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
}

.sidebar-nav .dropdown-menu li a{
  margin-left: 10pt;
}

.sidebar-nav li.open a, .sidebar-nav li a:hover, .sidebar-nav li a:active, .sidebar-nav li a:focus, .sidebar-nav li.open a:hover, .sidebar-nav li.open a:active, .sidebar-nav li.open a:focus {
  background-color: transparent;
  color: #ffffff;
  text-decoration: none;
}

.sidebar-nav > .sidebar-brand {
  font-size: 14pt;
  height: 52pt;
  line-height: 30pt;
}

.caret{
    float: right;
}

Проблема в том, что этот код не работает на кнопке импорта и экспорта, и я действительно не знаю, где это ошибка!

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

И заранее спасибо за ваш ответ!

Ответы [ 2 ]

1 голос
/ 24 февраля 2020

В Angular существует так много способов сделать это. По сути, это просто контроль состояния.

В этом примере я использую свойство в классе, но вы также можете использовать свойство объекта или любую другую вещь (например, возвращая класс из функции). .

Не использовать JQuery

JQuery было замечательно, но в Angular просто не делайте этого. Angular предоставляет более эффективные способы обновления DOM без перезаписи всего. Angular делает OoTB.

Пример в действии можно увидеть здесь

Но важно parts: 

<button type="button" [ngClass]="{'blue-button' : isBlue }" (click)='toggleButtonClass()'>Click Me</button>

Кнопка с событием щелчка и класс, основанный на состоянии логического значения.

Немного CSS для кнопки: 

.blue-button {
 background-color:blue;
 color:white;
 }

И, наконец, функция для переключения класса: 

public toggleButtonClass(){
   this.isBlue = !this.isBlue;
}

Кроме того, вы можете иметь массив объектов "Button", таких как: 

export class Button implements IButton {
Text: string;
Value: string;
IsSelected?: boolean = false;
}

И затем генерировать элементы управления, которые сделать то же самое: 

<div *ngFor="let button of Buttons">
   <button type="button" 
      (click)="toggleSelectedButton(button)" 
      [ngClass]="{'blue-button' : button.IsSelected}">{{button.Text}}
   </button>
</div>
0 голосов
/ 24 февраля 2020

Я рекомендую вам использовать HostListener и HostBinding, поэтому вы создаете директиву, которая, например, изменяет цвет при нажатии, а затем повторно используете ее в любом месте.

Пожалуйста, посмотрите на это пример 

  @Directive({
  selector: `[appHighlight]`
})
export class HighlightDirective {
  constructor(private el: ElementRef, private renderer: Renderer) { }

  @HostListener('document:click', ['$event'])
  handleClick(event: Event) {
    if (this.el.nativeElement.contains(event.target)) {
      this.highlight('yellow');
    } else {
      this.highlight(null);
    }
  }

  highlight(color) {
    this.renderer.setElementStyle(this.el.nativeElement, 'backgroundColor', color);
  }
}

, а затем в html

<div>
  <p appHighlight>
    <span>Text to be highlighted</span>
  </p>
</div>

рабочий пример можно найти на этой странице .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...