Question

我列出了将项目归为多个标题的列表。当您滚动浏览列表时，当前标题或标题会一直跟随您，直到您到达下一个标题为止，此时将当前标题或标题向上推，新标题或标题会停靠在顶部。

<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>

Answer 1

我建议您将此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"

向下滚动角度材料时如何使<mat-select>的分组标签粘在顶部

1 个答案: