mat-menu angular 中的固定项目

2024-05-18 • 问答

我有这个代码片段来向用户显示未读通知：

<mat-menu #menu="matMenu">
    <div class="menu-item" mat-menu-item *ngFor="let item of notifications">
        ...item content
    </div>
    <button class="show-all-btn" mat-menu-item (click)="navigateToNotification()">show all</button>
</mat-menu>

正如您在上面的代码中看到的，我通过 *ngFor 指令生成菜单项，作为最后一个菜单项，我添加了每次都存在于菜单中的“全部显示”按钮。如何在固定位置的 mat-menu 底部显示此按钮，该按钮无法通过滚动项目移动

lanshushumanyouji 回答：mat-menu angular 中的固定项目

我会用位置粘性来做，最小需要的样式是

.menu {
  position: relative;
}

.sticky {
  position: sticky;
  bottom: 0;
  background: white;
  z-index: 1;
}

Stackblitz example

angular angular-material css

本文链接：https://www.f2er.com/3138.html

mat-menu angular 中的固定项目

lanshushumanyouji 回答：mat-menu angular 中的固定项目

大家都在问