добавление Sticky FAB в материал Angular 2

Я хочу добавить липкую кнопку внизу экрана (а не на страницу) в моем проекте материалов angular 2. Я попробовал некоторые настройки, но в настоящее время, когда я прокручиваю вниз, кнопка не остается там, где должна была быть.

перед прокруткой это выглядит так:

перед прокруткой

после прокрутки:

после 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, чтобы делать то, что я хочу?

ОБНОВЛЕНИЕ:

Шаблон моего основного компонента:

<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%;
}

а затем внутри компонента, добавленного маршрутизатором-розеткой, появится элемент FAB.

Шаблон компонента Notes-list (тот, что показан на изображениях):

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

//rest of the content

Живая демонстрация


angular css angular-material angular-directive
person Saif    schedule 30.04.2017    source источник

Ответы (2)


arrow_upward
11
arrow_downward

Вы правильно разместили роутер-розетку в md-sidenav-container.

Добавьте следующий класс к вашему элементу FAB.

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

Вот как я заставил его работать.

person user1850630    schedule 30.06.2017

arrow_upward
1
arrow_downward

Добавьте собственный класс и примените свои стили, а также найдите иерархию, в которой файлы ссылаются на 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>

Живая демонстрация

Обновление 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>

Обновленная демонстрация

Обновление 2:

Посмотрите на приведенный ниже код, вы оборачиваете все внутри sidenav, что неправильно. Используйте как показано ниже

<md-sidenav-container id="sidenav-container">    </md-sidenav-container>
        // contents
    <router-outlet></router-outlet>
person Aravind    schedule 30.04.2017
comment
Тогда мне, должно быть, не хватает чего-то еще, вы применили тот же стиль к FAB, и он отлично сработал. - person Saif; 30.04.2017
comment
загляните в свою иерархию ссылок - person Aravind; 30.04.2017
comment
Я добавил иерархию моего компонента. Я предполагаю, что css side-nav-container должно вызывать проблему. - person Saif; 30.04.2017
comment
не иерархия компонентов. иерархия таблиц стилей, которую нужно искать - person Aravind; 30.04.2017
comment
взгляните на живую демонстрацию, которую я предоставил. Я добавил содержимое вашего блока в навигационную панель. - person Saif; 30.04.2017
comment
но это нарушает боковую навигацию, если вы заметили, она появляется под любым другим контентом. - person Saif; 30.04.2017
comment
чего вы ждете? скажи мне, я исправлю - person Aravind; 30.04.2017
comment
это новая ссылка на плункер относительно того, что я говорил: plnkr.co/edit/OSMha8XJFgmCnxkjUqHS?p - person Saif; 30.04.2017
comment
он не работает, изменение вложения вызывает проблемы с боковой навигацией, основное содержимое скрыто, также FAB появляется поверх боковой навигации, когда боковая навигация открыта, в отличие от ранее, когда кнопка не была зафиксирована. - person Saif; 30.04.2017
comment
Вы доступны в программе просмотра команд / - person Aravind; 30.04.2017
comment
как sidenav отображается в моем проекте: изображение - person Saif; 30.04.2017
comment
Позвольте нам продолжить это обсуждение в чате. - person Saif; 30.04.2017