Как сделать сгруппированные надписи <mat-select> прикрепленными к верху при прокрутке вниз в угловом материале - PullRequest
Новая
       7

Как сделать сгруппированные надписи <mat-select> прикрепленными к верху при прокрутке вниз в угловом материале

0 голосов
/ 06 января 2019

У меня есть список, который группирует элементы под несколькими заголовками. При прокрутке списка текущий заголовок или заголовок будет следовать за вами, пока вы не достигнете следующего, после чего текущий заголовок будет перемещен вверх, а новый заголовок или заголовок закрепится наверху. 

<mat-select (openedChange)="detectOpen($event)">
<mat-optgroup label="A">
    <mat-option value="option1">Option 1</mat-option>
    <mat-option value="option1">Option 1</mat-option>
</mat-optgroup>
<mat-optgroup label="B">
    <mat-option value="option1">Option 1</mat-option>
    <mat-option value="option1">Option 1</mat-option>
</mat-optgroup>
<mat-optgroup label="C">
    <mat-option value="option1">Option 1</mat-option>
    <mat-option value="option1">Option 1</mat-option>
    <mat-option value="option1">Option 1</mat-option>
</mat-optgroup>
<mat-optgroup label="D">
    <mat-option value="option1">Option 1</mat-option>
    <mat-option value="option1">Option 1</mat-option>
    <mat-option value="option1">Option 1</mat-option>
    <mat-option value="option1">Option 1</mat-option>
    <mat-option value="option1">Option 1</mat-option>
    <mat-option value="option1">Option 1</mat-option>
</mat-optgroup>
<mat-optgroup label="E">
    <mat-option value="option1">Option 1</mat-option>
    <mat-option value="option1">Option 1</mat-option>
    <mat-option value="option1">Option 1</mat-option>
    <mat-option value="option1">Option 1</mat-option>
    <mat-option value="option1">Option 1</mat-option>
    <mat-option value="option1">Option 1</mat-option>
</mat-optgroup>
</mat-select>

1 Ответ

0 голосов
/ 21 мая 2019

Я предлагаю вам добавить этот класс CSS в ваш основной файл CSS: 

  mat-optgroup.sticky{
        label{
            position: sticky;
            z-index: 1; // appear above mat-option
            top: 0; // fix at the top
            background-color: white; // don't see mat-option when scrolling
            box-shadow: 1px -2px 10px 0px grey; // shadow at the bottom
        }
    }

Затем добавьте это к вашему mat-optgroup: class="sticky"

...