Framework 7 Настройка ширины вкладок на панели вкладок

Есть ли способ придать вес ширине вкладок на панели вкладок в Framework7?

HTML-код ниже разделит панель вкладок на 3 вкладки одинаковой ширины.

<div class="toolbar tabbar">
    <div class="toolbar-inner">
      <a href="#tab-1" class="tab-link tab-link-active">Left Tab</a>
      <a href="#tab-2" class="tab-link">Center Tab</a>
      <a href="#tab-3" class="tab-link">Right Tab</a>
    </div>
</div>

Скажем, я хочу, чтобы левая и правая вкладки занимали 25% ширины панели вкладок, а центральная вкладка — оставшиеся 50%. Как я могу получить такое поведение с помощью CSS или API Framework7?


html css html-framework-7
person Guvenc Usanmaz    schedule 28.03.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете просто создать два класса CSS и применить их к нужному элементу вкладки.

CSS:

.w-25{
  width:25%!important;
}
.w-50{
  width:50%!important;
}

HTML:

<div class="toolbar tabbar">
    <div class="toolbar-inner row">
      <a href="#tab-1" class="w-25 tab-link tab-link-active">Left Tab</a>
      <a href="#tab-2" class="w-50 tab-link">Center Tab</a>
      <a href="#tab-3" class="w-25 tab-link">Right Tab</a>
    </div>
</div>

Вот рабочий канал: https://jsfiddle.net/42yLf4jt/4/

person Alexandre Prazeres    schedule 29.03.2018