Угловой материал 2 - Как запереть матовую панель и матовые вкладки вверх

Для моего веб-сайта я пытаюсь заблокировать <Mat-Toolbar> в верхней части экрана, а затем прямо под ним я хочу заблокировать <Mat-Tabs>.

Проблема, с которой я сталкиваюсь, заключается в том, что положение: исправлено в CSS, оно вообще не блокирует его, и когда я на самом деле захожу на сайт и проверяю его элемент, вставляя <div>

enter image description here

Как я должен заблокировать эти два элемента наверх, как я должен обойти этот автоматически созданный Div? У меня был предыдущий вопрос, похожий на этот, но я решил это, используя фиксированное и абсолютное позиционирование, которое не применяется в этой более новой версии Angular/Angular Material.

Исходный код для моего сайта

ОТВЕТЫ

Ответ 1

Вы имели в виду липкую панель инструментов?

Просто добавьте класс на панель инструментов и сделайте его липким:

.app-toolbar {
    position: sticky;
    position: -webkit-sticky; /* For macOS/iOS Safari */
    top: 0; /* Sets the sticky toolbar to be on top */
    z-index: 1000; /* Ensure that your app content doesn't overlap the toolbar */
}

Примечание. В IE 11 отсутствует поддержка position: sticky закрепление. Для получения дополнительной информации о поддержке position: sticky браузере position: sticky закрепление просмотрите эту страницу caniuse.

Ответ 2

Возможно, вы можете достичь этого, установив стиль с помощью :: ng-deep:

::ng-deep .mat-toolbar{
  z-index: 998;
  position: fixed
}
::ng-deep .mat-tab-group{
  margin-top:55px !important;
}

::ng-deep .mat-tab-header{
      z-index: 999;
      width:100vw;
      position: fixed  !important;
      background-color: red !important;
}
::ng-deep .mat-tab-body-wrapper{
    position: relative !important;
    margin-top:55px;
}

DEMO

Ответ 3

Даже я столкнулся с той же проблемой для моего проекта. Очень сложно сделать панель инструментов фиксированной, когда она объявлена внутри <mat-sidenav-container>.

Причина, по которой это сложно, состоит в том, что как <mat-sidenav-container> и <mat-toolbar> использует transform: translate3d(0,0,0).

Таким образом, лучший способ продолжить - удалить <mat-toolbar> из <mat-sidenav-container> и написать extenal css для панели инструментов.

mat-toolbar {
    height: 64px;
    position: fixed;
    z-index: 100;
    width: 100%  !important;
}

Это решение сработало для меня.

Ответ 4

Это работает для меня:

app.component.html

    <div class="app-container">
        <mat-sidenav-container>

            <mat-sidenav mode="over">
                <div>item 1</div>
                <div>item 2</div>
                <div>item 3</div>
            </mat-sidenav>

            <mat-toolbar>
                <i class="material-icons hamburger-menu">menu</i>
                <span>item A</span>
                <span>item B</span>
            </mat-toolbar>

            <div class="app-body">
                <router-outlet></router-outlet>
            </div>

        </mat-sidenav-container>
    <div>

style.css

    .app-body {
        overflow: auto;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        top: 64px;
    }

    .app-container {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

Ответ 5

mat-toolbar {
    height: 64px;
    position: fixed;
    z-index: 100;
    width: 100%  !important;
}

Просто добавьте эти строки в мои styles.css и моя проблема будет решена! ^ _ ^