Как сделать нижнюю планку, как показано на изображении, используя угловой материал или угловой? - PullRequest
Новая
       4

Как сделать нижнюю планку, как показано на изображении, используя угловой материал или угловой?

0 голосов
/ 10 октября 2019

Я создаю приложение angular 7 и проектирую пользовательский интерфейс. Я хочу исправить нижнюю панель, как показано на рисунке ниже. Требуется только средний круговой значок, оставьте эту другую вещь. вот изображение нижней полосы

1 Ответ

0 голосов
/ 11 октября 2019

Вы можете создать пользовательский компонент, используя панель инструментов mat, кнопку fab, div и стиль:

Шаблон компонента: 

<div class="fab-wrapper">
  <button mat-button mat-fab>
    <mat-icon>add</mat-icon>
  </button>
</div>
<mat-toolbar color="primary">
  <ng-content></ng-content>
</mat-toolbar>

Компонент SASS: 

:host {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  margin-top: -36px;

  .fab-wrapper {
    width: 56px;
    height: 56px;
    position: relative;
    top: 36px;
    left: calc(50% - 36px);
    padding: 8px;
    border-radius: 36px;
    background-color: white;
  }
}

Это должно привести вас в правильном направлении.

...