Как заменить следующую кнопку на mat-chip в Angular Material stepper?

#html #css

#HTML #css

Вопрос:

Я использую angular material stepper, в степпере я хочу заменить кнопку next на mat-chip и использовать ту же функциональность, что и кнопка next. Вот пример angular stepper stackblitz

Это то, что я хочу:

Ответ №1:

Если вы просто хотите, чтобы кнопка выглядела как материальный чип (а не как материальный чип), вы можете удалить ‘mat-button’ из кнопки next и добавить свой собственный класс, например, ‘next_btn’:

 <button class="next_btn" matStepperNext>Next</button>

Затем вы можете просто оформить кнопку так, чтобы она выглядела как чип:

 button.next_btn {
    padding: 7px 12px;
    border-radius: 16px;
    min-height: 32px;
    background-color: #e0e0e0;
    color: rgba(0,0,0,.87);
    box-shadow:none;
    border:none;
    cursor: pointer;
    outline:none;
}

button.next_btn:focus 
{
    outline:none;
}

Пример здесь.

1. Но, сэр, после нажатия кнопки chip like появляется синяя рамка, это не требуется. Как это исправить?

2. Обновили мой ответ — дайте мне знать, если дополнительный CSS удалит синюю рамку.

Ответ №2:

Как насчет того, чтобы вставить кнопку внутрь чипа? и управление внешним видом … взгляните здесь на демонстрацию

HTML:

 <mat-chip-list>
  <mat-chip><button mat-button matStepperPrevious>Back</button></mat-chip>
  <mat-chip><button mat-button matStepperNext>Next</button></mat-chip>
</mat-chip-list>

CSS:

 mat-chip{padding:0;}