📜  Framework7-标签

📅  最后修改于: 2020-10-25 02:53:10             🧑  作者: Mango


描述

制表符是按逻辑分组的内容集,使我们可以在它们之间快速翻页并像手风琴一样节省空间。

标签版面

以下代码定义选项卡的布局-


... The content for Tab 1 goes here ...
... The content for Tab 2 goes here ...

哪里-

  • -它是所有选项卡的必需包装。如果我们错过了,制表符将根本无法使用。

  • −它是一个选项卡,应具有唯一的id属性。

  • -它是一个活动标签,它使用其他活动类使标签可见(活动)。

在标签之间切换

您可以在选项卡布局中使用某些控制器,以便用户可以在它们之间切换。

为此,您需要使用tab-link类和href属性等于目标tab的id属性创建链接(标签)-

切换多个标签

如果使用单个选项卡链接在多个选项卡之间切换,则可以使用类而不是使用IDdata-tab属性。


...
...
...
...
...
...

tab-link的data-tab属性包含目标选项卡的CSS选择器。

我们可以使用不同的选项卡方式,这些方式在下表中指定-

S.No Tabs Types & Description
1 Inline Tabs

Inline tabs are sets of grouped in inline that allow you to quickly flip between them.

2 Switch Tabs From Navbar

We can place tabs in navigation bar that allow you to flip between them.

3 Switch Views From Tab Bar

Single tab can be used to switch between views with its own navigation and layout.

4 Animated Tabs

You can use simple transition (animation) to switch tabs.

5 Swipeable Tabs

You can create swipeable tabs with simple transition by using the tabs-swipeable-wrap class for the tabs.

6 Tabs JavaScript Events

JavaScript events can be used when you are working with JavaScript code for the tabs.

7 Show Tab Using JavaScript

You can switch or show the tab using JavaScript methods.