框架7调整Tabbar上的Tab宽度

Question

有没有一种在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或Framework7 API来获得这种行为？

Answer 1

您可以简单地创建两个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/