FAB во вкладке со скролом

Questions
1

Проблема в том, что FAB не фиксируется в теле вкладки и прокручивается вместе с контентом.
Есть ли какое-то решение из коробки, чтобы не пришлось колдовать со стилями?

2

А почему в Kitchen она фиксируется?

3

Так там нет вкладки, там просто страница со скролом.

4

Это тоже самое по сути, page-content есть?

5

Твой код

<div class="fab fab-right-bottom color-blue">
  <i class="icon f7-icons">plus</i>
</div>
<!-- должен быть за пределами -->
<div class="page-content">...</div>

Если Vue, то надо указать слот, что фиксированный

<f7-page>
  <f7-navbar>...</f7-navbar>
  <f7-fab slot="fixed"> <!-- со слотом -->
  ...
  </f7-fab>
  <f7-list>
    <f7-list-item/>
  </f7-list>
</f7-page>

Или такой вариант где f7-page-content указывается

<f7-page :page-content="false">
  <f7-navbar>...</f7-navbar>
  <f7-fab> <!-- без слота -->
  ...
  </f7-fab>
  <f7-page-content> <!-- зона для контента -->
    <f7-list>
      <f7-list-item/>
    </f7-list>
  </f7-page-content>
</f7-page>
6

Так сработает, только косяк в том, что кнопка будет на всех вкладках.

7 
<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner">
      <div class="title">Routable Tabs</div>
    </div>
  </div>
  <div class="toolbar tabbar toolbar-bottom">
    <div class="toolbar-inner">
      <!-- additional "data-route-tab-id" must match to tab's ID in the specified routes -->
      <a href="/" class="tab-link" data-route-tab-id="tab-1">Tab 1</a>
      <a href="/tab-2/" class="tab-link" data-route-tab-id="tab-2">Tab 2</a>
      <a href="/tab-3/" class="tab-link" data-route-tab-id="tab-3">Tab 3</a>
    </div>
  </div>
  <!-- Additional "tabs-routable" is required on tabs -->
  <div class="tabs tabs-routable">
    <div class="tab page-content" id="tab-1"></div>
    <div class="tab page-content" id="tab-2"></div>
    <div class="tab page-content" id="tab-3"></div>
  </div>
</div>
8

Пардон изначально вопрос не посмотрел, нужно было решить во вкладках. Я использую Vue. И генерирует вот такой аля html

<div class="tabs swiper-wrapper tabs-routable">
   <div class="tab tab-active swiper-slide swiper-slide-active" id="tab-1"> <!-- добавь эти классы-->
     <div class="fab fab-right-bottom">...</div> <!--вынеси отдельно сюда-->
     <div class="page-content">
        <div><!--code--></div>
     </div>
    </div>
  </div>
  <div class="tab swiper-slide swiper-slide-next page-content" id="tab-2">
   ... <!-- делаешь аналогично или так-->
  </div>
  <div class="tab swiper-slide swiper-slide-next page-content" id="tab-3">
   ... <!--аналогично-->
  </div>
</div>
9

Честно из за чего, но у меня работает из под коробки. Увидел поздно, попробуй, не знаю может из за этих swipe* классов, а может дополнительного одного div после page-content :slight_smile:

10

Значит нужно обернуть каждую вкладку в ещё один элемент внутри которого будет и FAB и page-content на одном уровне

11

Крутил-вертел. Получилось но без скрола во вкладке. Может я неправильно понял?

<div class="tabs tabs-routable">
    <div class="tab tab-active" id="friends">
        <div id="inviteButton" class="fab fab-right-bottom" style="">
            <a href="#">
                <i class="fas fa-user-plus"></i>
            </a>
        </div>
        <div class="page-content">
            <div id="friendsList" class="list media-list">
                <ul>
                    <li>...</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="tab" id="history">
        <div class="page-content"></div>
    </div>
    <div class="tab" id="settings">
        <div class="page-content"></div>
    </div>
</div>
12

Получилось. Все ломалось из-за элемента на одном уровне с .tabs и .toolbar

1 Like