Clarity Wizard - добавить css-селектор к пользовательской кнопке мастера - PullRequest
Новая
       20

Clarity Wizard - добавить css-селектор к пользовательской кнопке мастера

0 голосов
/ 28 сентября 2018

У меня есть мастер со следующими пользовательскими кнопками мастера: 

<clr-wizard-button [type]="'cancel'">Cancel</clr-wizard-button> 
<clr-wizard-button [type]="'previous'">Previous</clr-wizard-button>
<clr-wizard-button [type]="'next'">Next</clr-wizard-button>
<clr-wizard-button [type]="'custom-save'">Save</clr-wizard-button>

Теперь я хочу стилизовать кнопку типа custom-save с помощью собственного цвета, и для этого мне нужно применить css-селектор.attr.class не будет работать.

Каков наилучший способ добиться этого?

edit: Форматированный вывод html кнопки пользовательского сохранения: 

<clr-wizard-button class="clr-wizard-btn-wrapper" _nghost-c5="" ng-reflect-type="custom-save" ng-reflect-disabled="false" aria-hidden="false">
  <button _ngcontent-c5="" class="btn clr-wizard-btn" type="button">
  Speichern
  </button>
</clr-wizard-button>

Ответы [ 2 ]

0 голосов
/ 01 октября 2018

Просто поместите пользовательский класс в ClrWizardButton, и он будет отрисован для вас. 

<clr-wizard-button [type]="'custom'" class="my-custom-button">Cancel</clr-wizard-button>

Это будет отображаться, как вы видите, где вы можете нацелить кнопку, используя .my-custom-button button в вашем CSS.

<clr-wizard-button class="my-custom-button clr-wizard-btn-wrapper ng-star-inserted" _nghost-c1="" ng-reflect-type="custom-previous" aria-hidden="false">
  <button _ngcontent-c1="" class="btn clr-wizard-btn btn-outline clr-wizard-btn--secondary" type="button">Custom</button>
</clr-wizard-button>
0 голосов
/ 28 сентября 2018

Если предположить, что это стандартное button с type, тогда селектор атрибута будет работать. 

button[type="custom-save"] {
  background: lightgreen;
}
<button type="custom-save">Save</button>
...