Как сделать отдельные угловые материалы, шаговый коллектор и содержимое?

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

Моя идея состоит в том, чтобы отделить заголовки от контента, чтобы он выглядел больше как sidenav, но с функциональностью углового материала.

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

И здесь есть то, что я хотел, хотел шаговый, где содержимое находится в центре страницы и заголовки шагов в сторону

Я пытался редактировать заголовки, как это:

mat-step-header{
  display: flex ;
  justify-content: flex-end ;
}

Но это не работает.

Источник

2 ответа

Решение

Я не уверен, что это работает так же на степпере, но я сделал то же самое на вкладках. Я использовал сервис для обмена данными между компонентами. Если вы используете содержимое и заголовок в одном месте, вы можете попробовать использовать 2 степпера.

1 для заголовка и второй для содержимого. Вы должны иметь возможность скрыть заголовок для второй вкладки и содержимое для первой вкладки. На первой вкладке вы можете использовать selectedIndex, связанный с переменной в машинописи. Так что, как только вы измените переменную, он перейдет к этому шагу. чтобы изменить переменную, вы можете сделать функцию selectionChange, которая будет принимать событие шага из header-stepper и изменять переменную. Из того, что я увидел, степпер похож на вкладки. так что это должно работать. Надеюсь это поможет.

header stepper(selectionChange) = "selectionChange ($ event)"

Content Stepper[(selectedIndex)] = "selectedIndex"

Источник

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

В моем случае я хотел спроецировать текущий шаг на панель расширения вместе со степпером. Этот пример иллюстрирует, как вы можете заполнить различные разделы из степпера, используя кнопки в строке действий панели для навигации по степперу:

        <mat-stepper #stepper orientation="vertical">
    <ng-template #expansionPanelHeader>
      <ng-container [ngTemplateOutlet]="stepper.selected?.stepLabel.template"></ng-container>                
    </ng-template>

    <ng-template #expansionPanelContent>
      <ng-container [ngTemplateOutlet]="stepper.selected?.content"></ng-container>
    </ng-template>

    <ng-template #expansionPanelActionRow>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button matStepperNext>Next</button>
    </ng-template>

    <mat-step>
      <ng-template matStepLabel>Step 1</ng-template>
      <ng-template matStepContent>
        This is the content of step 1.
      </ng-template>
    </mat-step>

    <mat-step>
      <ng-template matStepLabel>Step 2</ng-template>
      <ng-template matStepContent>
        This is the content of step 2.
      </ng-template>
    </mat-step>
  </mat-stepper>

  <!-- The current step will be projected into this component -->
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <ng-container [ngTemplateOutlet]="expansionPanelHeader"></ng-container>
    </mat-expansion-panel-header>

    <ng-template matExpansionPanelContent>
      <ng-container [ngTemplateOutlet]="expansionPanelContent"></ng-container>
    </ng-template>

    <mat-action-row>
      <ng-container [ngTemplateOutlet]="expansionPanelActionRow"></ng-container>
    </mat-action-row>
  </mat-expansion-panel>

К сожалению, единственный способ предотвратить появление содержимого степпера внутри степпера — это немного CSS:

      .mat-vertical-content-container {
  display: none !important;
}

CSS должен быть размещен либо в глобальном .scssфайл или вам нужно будет использовать ng-deepили какое-то другое подобное «решение». Я предпочитаю первое, ограниченное содержащимися элементами.

Источник
Другие вопросы по тегам