Framework7 - 标签

Framework7标签 - 从概述，环境，布局，导航栏，工具栏，搜索栏，状态栏，侧面板，内容块，布局网格，叠加层，预加载器，进度条，列表视图，手风琴，卡片，芯片，按钮开始学习Framework7动作按钮，表单，选项卡，Swiper滑块，照片浏览器，自动完成，选择器，日历，刷新，无限滚动，消息，消息栏，通知，延迟加载，颜色主题，细线，模板概述，自动编译，Template7页面，活动状态，点按保持事件，触摸波纹。

描述

标签是一组逻辑分组的内容，允许我们在它们之间快速翻转并保存像手风琴一样的空间.

标签布局

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

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

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

其中 :

< div class ="tabs"> : 它是所有选项卡的必需包装器.如果我们错过了，那么标签就完全无法使用.
< div class ="tab"> : 它是一个标签，应该有唯一ID 属性.
< ; div class ="tab active"> : 它是一个单独的活动选项卡，它使用额外的活动类使选项卡可见(活动).

在标签之间切换

您可以在标签布局中使用某些控制器，以便用户可以在它们之间切换.

为此，你需要创建链接(< a>标签)与 tab-link 类和 href 属性等于目标选项卡的 id 属性 : 去;

Tab 1Tab 2Tab 3

切换多个选项卡

如果使用单个选项卡链接在多个选项卡之间切换，则可以使用类而不是使用 ID的和数据选项卡属性.

   ...   ...   ...   ...   ...   ...      Tab 1      Tab 2      Tab 3

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

我们可以使用不同的制表方式，这些方法在下表中指定 :

S.No	Tabs Types&说明
1	内联选项卡内联选项卡是以内联方式分组的集合，允许您在它们之间快速切换.
2	从导航栏切换选项卡我们可以在导航栏中放置标签，允许您在它们之间切换.
3	从标签栏切换视图单个标签可用于在具有自己的导航和布局的视图之间切换.
4	动画标签您可以使用简单转换(动画)来切换标签.
5	可擦除选项卡您可以使用 tabs-swipeable-wrap 类为选项卡创建具有简单转换的可滑动选项卡.
6	选项卡JavaScript事件使用JavaScript代码时可以使用JavaScript事件对于标签.
7	使用JavaScript显示标签您可以使用切换或显示标签JavaScript方法.

S.No	Tabs Types&说明
1	内联选项卡内联选项卡是以内联方式分组的集合，允许您在它们之间快速切换.
2	从导航栏切换选项卡我们可以在导航栏中放置标签，允许您在它们之间切换.
3	从标签栏切换视图单个标签可用于在具有自己的导航和布局的视图之间切换.
4	动画标签您可以使用简单转换(动画)来切换标签.
5	可擦除选项卡您可以使用 tabs-swipeable-wrap 类为选项卡创建具有简单转换的可滑动选项卡.
6	选项卡JavaScript事件使用JavaScript代码时可以使用JavaScript事件对于标签.
7	使用JavaScript显示标签您可以使用切换或显示标签JavaScript方法.