在Angular 2材料中添加Sticky FAB

时间:2017-04-30 05:34:08

标签: css angular angular-material angular-directive

我想在我的角度2素材项目的屏幕底部(而不是页面)添加一个粘滞按钮。 我尝试了一些调整,但是当我向下滚动按钮时,它并没有停留在预期的位置。

滚动前的

如下所示:

before scroll

滚动后

after wcroll

模板中的元素HTML:

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

CSS应用于元素除了任何默认值:

#fab{
    position: fixed;
    right: 30px;
    bottom: 30px;
}
*{
    margin: 0;
}
  1. 我该如何解决这个问题?
  2. 此外,是否有任何内置方式使用Angular材料来做我想要的事情?
  3. 更新

    我的主要组件&#39;模板:

    <toolbar></toolbar>
    <side-nav></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%;
    }
    

    然后在路由器插座添加的组件内部将出现FAB元素。

    Notes-list组件的模板(图片中显示的模板):

    <a md-fab id="fab">
        <md-icon>add</md-icon>
    </a>
    
    //rest of the content
    

    LIVE DEMO

2 个答案:

答案 0 :(得分:8)

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

将以下类添加到您的FAB元素。

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

这就是我开始工作的方式。

答案 1 :(得分:1)

添加自定义类并应用样式也会查找文件引用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>