Блог

Главная - Вопросы по программированию - Можно ли установить флажок » Мат » так, чтобы вместо галочки отображался крестик?

Можно ли установить флажок » Мат » так, чтобы вместо галочки отображался крестик?

#html #angular #angular-material

Вопрос:

Попытка реализовать функциональность с использованием углового материала <mat-checkbox> , где, если пользователь нажимает на Yes кнопку, на ней отображается галочка. Если пользователь нажмет No кнопку, на ней появится буква X. Я нахожу официальное руководство по угловым материалам немного расплывчатым, я думаю.

Я попытался добавить новый ‘X’ svg в качестве содержимого внутри класса mat-checkbox-background, но он работает только с инкапсуляцией. Я также не могу добавлять в global, потому что я также использовал <mat-checkbox> другие компоненты.Я хочу, чтобы это применялось только к одному компоненту.

  .mat-checkbox-background{
     content: url(/assets/icons/cancel_checkbox.svg) !important;
  }

Пожалуйста, дайте несколько предложений
Спасибо!

Примечание: не хотите использовать инкапсуляцию, так как она влияет на другие стили.

Комментарии:

1. Вы пробовали этот класс .mat-флажок .mat-флажок-фон {}?

2. Это AngularJS или Angular 2?

3. @SarathMohandas да, это не сработало.

4. @NavnathJadhav это угловой 12

Ответ №1:

Если я правильно понял, вы хотите показать «X», когда он не проверен. В этом случае будет полезен приведенный ниже CSS:

 mat-checkbox.cross {
  .mat-checkbox-background {
    background-image: url("data:image/svg xml,");
    background-position: center;
    background-size: contain;
  }
}

Вам нужно будет использовать класс с <mat-checkbox> :

 <mat-checkbox class="cross">...</mat-checkbox>

Я также создал стекблитц: https://stackblitz.com/edit/angular-gyykpy?file=src/styles.scss

Комментарии:

1. Большое вам спасибо за ответ, но он работает только в глобальном css и будет применяться ко всему проекту. я просто хочу использовать его на одном компонентном представлении.

2. Вы можете просто справиться с этим через класс. Обновил ответ. Просто используйте class="cross" там, где вы хотите пересечь.

3. Спасибо, это именно то, что я сделал, я создал простой класс, и он работает.

Метки: ,