Угловой материал Шаговый компонент с надписью внизу

Question

Используя Угловой материал Stepper, компонент , как сделать степпер, который выглядит как этот образец .Я хочу, чтобы в нижней части номера шага появилась метка степпера, как показано в примере.

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

Answer 1

Для мата-горизонтального степпера можно определить положение этикетки.end - значение по умолчанию, а bottom поместит его под значком шага, а не сбоку.Это поведение контролируется свойством labelPosition.

используйте эту ссылку: https://material.angular.io/components/stepper/overview

Answer 2

Афайк, на данный момент нет нативной возможности сделать это, как вы сказали.Вы можете попробовать использовать CSS для стилизации элементов по вашему желанию.

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

.mat-horizontal-stepper-header-container{
  margin-bottom: 20px; 
}

.mat-horizontal-stepper-header{ 
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  margin-bottom: -15px;
}

.mat-step-label{
  position: relative;
  top: 10px;
}

.mat-stepper-horizontal-line{
 margin: 0 -30px !important;
}

.mat-horizontal-stepper-header .mat-step-icon, .mat-horizontal-stepper-header .mat-step-icon-not-touched{
  margin-right: 0 !important;
}

Это не так уж и элегантно, но, похоже, работает.

Если это то, что вы ищете, вам следует провести тщательное тестирование с использованием более длинных / более коротких этикеток и разных размеров экрана.