Angular2: set md-fab button 'position: fixed' in internal component

Question

Я использую кнопку md-fab из оригинальной рамочной рамки. Я хочу установить кнопку md-fab (для добавления нового объекта) position: fixed, но я хочу поместить кнопку во внутренний компонент внутри md-sidenav-layout, но если я это сделаю, то position: fixed не будет работать.

Код выше:

<div class="{{themeService.ActualTheme}}"> 
    <md-sidenav-layout class="full-height" fullscreen> 

Этот атрибут класс только для тематизации приложения я также попробовал без полноэкранного режима и установить с классом «полной высотой» на md-sidenav-layout до 100% высоты и абсолютной, но это не сработает.

Первая попытка (position: fixed не работает):

 <button (click)="onPlusClickAction()" class="add-group-button" color="accent" md-fab> 
      <md-icon class="md-24 plus-icon">add</md-icon> 
     </button> 

    </md-sidenav-layout> 
</div> 

Вместо router-outlet внутренний компонент будет заменен (стандарт маршрутизации angular2).

Теперь я пытался поставить мкр-разборной кнопку здесь:

 <router-outlet></router-outlet> 

    </md-sidenav-layout> 

    <button (click)="onPlusClickAction()" class="add-group-button" color="accent" md-fab> 
     <md-icon class="md-24 plus-icon">add</md-icon> 
    </button> 
</div> 

Если я это так, то position: fixed работает, но теперь мкр-разборная кнопка находится за пределы md-sidenav-layout и всегда, когда Я открываю свой сиден, застежка-молния лежит над сиднавом. z-index не работает, потому что кнопка fab исчезает полностью.

У кого-нибудь есть хорошая идея решить эту проблему?

Спасибо заранее!

Answer 1

Фиксированное положение не работает, потому что есть атрибут CSS transform: translate3d, установленный на элементе md-sidenav-layout. В таких случаях

объект будет действовать как содержащий блок для позиции: фиксированные элементы , что она содержит

см https://developer.mozilla.org/en-US/docs/Web/CSS/transform

Существует уже открытый вопрос о проекте Материал 2 запроса для удаления значения translate3d от sidenav, но до настоящего времени команда материалов не рассматривала проблему: https://github.com/angular/material2/issues/998

Я столкнулся с такой же ситуацией и решил ее довольно тяжелым обходным путем. Я удалил FAB из основного содержимого, определил вторичную розетку маршрутизатора в моем шаблоне (вне md-sidenav-layout), создал автономный компонент для FAB и использовал Observable в службе для трансляции событий кликов на основные компоненты ,

Компоновка

<md-sidenav-container> 
    <md-sidenav #sidenav mode="side" class="app-sidenav"> 
     <md-nav-list> 
      <a md-list-item routerLink="/"> 
       <span md-line>Home</span> 
      </a> 
    </md-nav-list> 
    </md-sidenav> 
    <md-toolbar color="primary"> 
     <button md-icon-button (click)="sidenav.toggle()"> 
      <md-icon class="icon-40">menu</md-icon> 
     </button> 
     <span>Angular Material 2 Sidenav with FAB</span> 
    </md-toolbar> 
    <router-outlet></router-outlet> 
</md-sidenav-container> 
<router-outlet name="fab"></router-outlet> 

ФАБ службы

export class FabService { 

    private actionSource = new Subject<string>(); 
    public actionStream = this.actionSource.asObservable(); 

    public broadcastAction(action: string) { 
     this.actionSource.next(action); 
    } 
} 

ФАБ компонент

@Component({ 
    template: '<button md-fab class="fab" (click)="actionHandler()"><md-icon>add</md-icon></button>', 
    styles: [` 
     button.fab { 
      position: fixed; 
      bottom: 12px; 
      right: 12px; 
     } 
    `] 
}) 
export class FabComponent { 

    constructor(private fabService: FabService) { } 

    actionHandler() { 
     this.fabService.broadcastAction('click'); 
    } 
} 

Основной компонент

export class MainComponent implements OnInit, OnDestroy { 
    private subscription: Subscription; 

    constructor(private fabService: FabService) { } 

    ngOnInit(): void { 
    this.subscription = this.fabService.actionStream.subscribe(event => this.events.push(event)); 
    } 

    ngOnDestroy() { 
    this.subscription.unsubscribe(); 
    } 
} 

И маршрутизацией

const routes: Routes = [ 
    { path: '', children: [ 
     { path: '', component: MainComponent}, 
     { path: '', component: FabComponent, outlet: 'fab' } 
    ]} 

Полный рабочий пример: http://plnkr.co/edit/GLFWfdy2JSXNKefhuNLA?p=preview

Answer 2

У меня была такая же проблема. После огромного исследования, я нашел два хороших решения:

Вариант 1:

Вы можете добавить display: flex свойство к md-sidenav компонента и к md-sidenav-content. Пожалуйста, проверьте следующее рабочее пример: http://plnkr.co/edit/VItn3Y2AaTzpzIykTTyH?p=preview

Вариант 2:

Как @ Андраш Szepesházi сказал, что главная проблема исходит от transform: translate3d собственности, поэтому самое простое решение, чтобы удалить его:

.md-sidenav-content { 
    transform: none !important; 
} 

ПРИМЕЧАНИЕ: проверьте, что именно transform: translate3d(0,0,0) делает. Вот хороший ответ SO: https://stackoverflow.com/a/18529444/2765346