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

Question

Я использую угловой и угловой материал для проекта.Поскольку дизайн этого проекта основан на материале, я использую угловой материал для его компонентов.

Я создал панель инструментов с помощью <mat-toolbar> и список вкладок с помощью mat-tab-group.И страница выглядит следующим образом:

Это все в порядке.Первая вкладка также содержит список И именно здесь начинается проблема ..

---

Проблема

Когда вы обычно прокручиваете список вниз, в соответствии с дизайн материала :

верхняя полоса должна прокручиваться, а выступы должны быть сверху.Это не стандартное поведение Angular Material, и мне интересно, возможно ли это воссоздать?

Я воссоздал поведение по умолчанию в stackblitz .

---

Мои версии

• Angular: 7.2.6
• Угловой материал: 7.3.3

Answer 1

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

Добавьте приведенный ниже код в ваш существующий stackblitz файл CSS.Это может определенно работать.

.mat-tab-group .mat-tab-header
{
  position: sticky;
  top:0;
}

Answer 2

Используя ваш существующий stackblitz , добавьте это в свой app.component.ts :

.mat-tab-group{height: 100%;position: fixed; width:98vw;}
.mat-toolbar.mat-primary { width:98vw; }

Добавьте это в свой styles.css :

body { margin:1vw !important; }

ключом к эффекту, который вы ищете, является `.mat-tab-group {height: 100%; position: fixed;} ... но вы увидитечто mat-group будет короче, чем mat-toolbar , который выглядит довольно некрасиво ... поэтому мы установили для них обоих одинаковую ширину ... но теперь у нас есть другая проблемаполе является странным, потому что тело установлено с полем 8px, так что, наконец, мы переопределяем абсолютное число 8px на 1vw ... так что это выглядит красиво.

Надеюсь, это ответит на ваш вопрос.