在 Angular 2 材质中添加粘性 FAB

Posted 2023-02-22

【中文标题】在 Angular 2 材质中添加粘性 FAB

【英文标题】：adding Sticky FAB in Angular 2 Material

【发布时间】：2017-09-27 22:23:39

【问题描述】：

我想在我的 Angular 2 材质项目中的屏幕底部（不是页面）添加一个粘性按钮。 我尝试了一些调整，但目前当我向下滚动按钮时，它并没有停留在它应该在的位置。

滚动前如下所示：

滚动后：

模板内元素的 html：

<a md-fab id="fab">
    <md-icon>add</md-icon>
</a>

在元素上应用 CSS 任何默认值除外：

#fab
    position: fixed;
    right: 30px;
    bottom: 30px;

*
    margin: 0;

我该如何解决这个问题？ 此外，是否有任何内置的 Angular 材料可以满足我的需求？

更新：

我的主要组件的模板：

<toolbar></toolbar>
<side-nav></side-nav>

侧导航的模板：

<md-sidenav-container id="sidenav-container">

    // contents

    <router-outlet></router-outlet>

</md-sidenav-container>

及其 CSS：

#sidenav-container  // styling to make side nav of full height
    position: fixed;
    height: 90%;
    min-height: 90%;
    width: 100%;
    min-width: 100%;

然后在router-outlet添加的组件内部会出现FAB元素。

Notes-list 组件的模板（如图所示）：

<a md-fab id="fab">
    <md-icon>add</md-icon>
</a>

//rest of the content

LIVE DEMO

【参考方案1】：

将路由器插座放在 md-sidenav-container 中是正确的。

将关注类添加到您的 FAB 元素中。

.md-fab-bottom-right2 
    top: auto !important;
    right: 20px !important;
    bottom: 10px !important;
    left: auto !important;
    position: fixed !important;

这就是我让它工作的方式。

【参考方案2】：

添加一个自定义类并应用您的样式，同时查找文件引用到 DOM 的层次结构

<div class="example-container">    

  <h3>sticky icons</h3>
  <a class="mine" md-fab routerLink=".">
    <md-icon>check</md-icon>
  </a>
  <a md-mini-fab routerLink=".">
    <md-icon>check</md-icon>
  </a>

</div>

LIVE DEMO

更新 1： 您正在使用 md-sidenav 容器内的图标，这是一个错误

<div class="example-container">
  <md-sidenav-container>

    <md-sidenav #sidenav>
      <p>side nav works</p>
    </md-sidenav>

  </md-sidenav-container>
    <p>content</p>
    <a class="mine" md-fab (click)="sidenav.open()">
      <md-icon>check</md-icon>
    </a>

</div>

Updated Demo

更新 2：

看看下面的代码，你把所有的东西都包装在 sidenav 里面，这是错误的。如下使用

<md-sidenav-container id="sidenav-container">    </md-sidenav-container>
        // contents
    <router-outlet></router-outlet>

【讨论】：

那我一定是遗漏了一些东西，你在 FAB 上应用了相同的样式并且效果很好。

查看您的参考层次结构

我添加了组件的层次结构。我猜side-nav-container的css一定是有问题的。

不是组件层次结构。您需要查找的样式表层次结构

看看我提供的现场演示。我在 sidenav 中添加了您的 plunk 内容。