6

我有一个 angular2 应用程序,它使用 Angular2-material 库进行样式设置。我正在尝试添加一个 FAB(浮动操作按钮)以悬停在应用程序的右上角,但它会将自身固定到其父组件,而不是窗口。

应用程序的层次结构如下:

app.component
|-detail.component

在 app.component 模板中,我在布局指令的主体中使用 md-sidenav-layout 指令和 router-outlet:

<md-sidenav-layout>
  <md-sidenav #sideNav (open)="closeStartButton.focus()">
    <router-outlet name="navMenu"></router-outlet>
    <br>
    <button md-button #closeStartButton (click)="sideNav.close()">Close</button>
  </md-sidenav>
  <md-toolbar color="primary">
    <button md-icon-button (click)="sideNav.toggle()">
      <md-icon class="md-24">menu</md-icon>
    </button>
    <span>{{title}}</span>
  </md-toolbar>
  <div role="main">
    <router-outlet></router-outlet>
  </div>
</md-sidenav-layout>

在详细组件模板中,模板顶部有以下内容:

<button md-mini-fab class="fab" (click)="toggleAdd()">
  <i class="material-icons">add</i>
</button>

以及该组件的 css:

.fab {
  display: block;
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  z-index: 10;
}

但是,当我导航到详细信息页面时,.fab 相对于组件而不是窗口定位。我试过encapsulation: ViewEncapsulation.None在细节组件上使用,但这也不影响它。有没有办法将 fab 定义在细节组件中,但它是否仍然相对于窗口固定?

4

3 回答 3

6

在您的 app.component.html 中添加以下代码:

<md-sidenav-container>
    <md-sidenav mode="side" opened="true">Drawer content</md-sidenav>
    <div class="my-content">Main content</div>
</md-sidenav-container>

全局样式.css:

html, body, material-app, md-sidenav-container, .my-content {
    margin: 0;
    width: 100%;
    height: 100%;
}

这个对我有用!;)

于 2017-08-07T08:58:46.633 回答
6

寻找在链上应用 CSS 转换的东西。在我的例子中,我通过 Angular 动画应用了变换。显然变换中断位置:固定。为什么`transform`会破坏`position:fixed`?

我希望我现在能弄清楚如何完成这项工作。

于 2017-02-15T13:34:36.980 回答
2

我在这里回答了一个非常相似的问题。

要点:我用一个相当繁重的解决方法解决了这个问题。我从主要内容中删除了 FAB,在我的模板中定义了一个辅助路由器出口(在 md-sidenav-layout 之外),为 FAB 创建了一个独立组件,并在服务中使用 Observable 将点击事件广播到主要组件.

另一个线程中的答案包含代码示例和一个有效的 plunker 示例。

于 2017-02-20T13:08:14.833 回答