我想在我的角度2素材项目的屏幕底部(而不是页面)添加一个粘滞按钮。 我尝试了一些调整,但是当我向下滚动按钮时,它并没有停留在预期的位置。
滚动前的如下所示:
滚动后:
模板中的元素HTML:
<a md-fab id="fab">
<md-icon>add</md-icon>
</a>
CSS应用于元素除了任何默认值:
#fab{
position: fixed;
right: 30px;
bottom: 30px;
}
*{
margin: 0;
}
更新
我的主要组件&#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
答案 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>