logo

额外区块类型 (EBT) - 全新的布局构建器体验❗

额外区块类型 (EBT) - 样式化、可定制的区块类型:幻灯片、标签页、卡片、手风琴等更多类型。内置背景、DOM Box、JavaScript 插件的设置。立即体验布局构建的未来。

演示 EBT 模块 下载 EBT 模块

❗额外段落类型 (EPT) - 全新的 Paragraphs 体验

额外段落类型 (EPT) - 类似的基于 Paragraph 的模块集合。

演示 EPT 模块 滚动

滚动

演示:EPT 标签页

13/09/2025, by Ivan

EPT:Tabs Drupal 模块概览

Extra Paragraph Types (EPT):Tabs 模块创建了一个新的段落类型用于选项卡。选项卡内容可以是区块、页面、Views 以及格式化文本。Tabs 基于 jQuery UI Tabs 插件,并具有各种 jQuery 插件的设置。

你可以从 Drupal.org 下载 EPT Tabs:

https://www.drupal.org/project/ept_tabs

composer require drupal/ept_tabs

EPT Tabs 基于 jQuery UI Tabs 插件:

https://jqueryui.com/tabs/

安装后,Drupal EPT Tabs 模块会新增一个用于选项卡的区块类型。

EPT Tabs 包含所有 EPT 模块的功能,包括 DOM Box、背景颜色 / 图片 / 视频、Edge to Edge 设置:

https://drupalbook.org/ept/demo 

选项卡内容可以是区块、页面、Views 和格式化文本。Tabs 基于 jQuery UI Tabs 插件,并具有多种 jQuery 插件的设置。

EPT Tabs 内容

EBT Tabs 支持不同的样式:

  • 无标题背景
  • 极简风格选项卡
  • 按钮式选项卡
  • 垂直选项卡
  • 旋转的垂直选项卡

EPT Tabs 样式

 

默认设置选项卡

选项卡 1

选项卡 1 内容

选项卡 2

选项卡 2 内容

无标题背景

选项卡 1

选项卡 1 内容 

Tab 2

选项卡 2 内容  

极简风格选项卡

选项卡 1

选项卡 1 内容 

选项卡 2

选项卡 2 内容 

按钮式选项卡

选项卡 1

选项卡 1 内容 

选项卡 2

选项卡 2 内容

垂直选项卡

选项卡 1

选项卡 1 内容  

选项卡 2

选项卡 2 内容 

旋转的垂直选项卡

选项卡 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse placerat elit vitae ex tincidunt feugiat. Ut mollis sem in lorem varius, vel facilisis ex pulvinar. Pellentesque ornare felis tellus, id aliquet lacus fringilla id. Proin aliquet euismod diam, ut eleifend arcu volutpat sit amet. Cras iaculis ultricies dolor ac malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue orci vitae dignissim vulputate. Integer commodo turpis nulla, et feugiat mi faucibus a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

选项卡 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse placerat elit vitae ex tincidunt feugiat. Ut mollis sem in lorem varius, vel facilisis ex pulvinar. Pellentesque ornare felis tellus, id aliquet lacus fringilla id. Proin aliquet euismod diam, ut eleifend arcu volutpat sit amet. Cras iaculis ultricies dolor ac malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue orci vitae dignissim vulputate. Integer commodo turpis nulla, et feugiat mi faucibus a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse placerat elit vitae ex tincidunt feugiat. Ut mollis sem in lorem varius, vel facilisis ex pulvinar. Pellentesque ornare felis tellus, id aliquet lacus fringilla id. Proin aliquet euismod diam, ut eleifend arcu volutpat sit amet. Cras iaculis ultricies dolor ac malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue orci vitae dignissim vulputate. Integer commodo turpis nulla, et feugiat mi faucibus a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

活动部分

你可以选择默认打开哪个部分。使用“活动部分”字段来填写部分的顺序号。活动部分的设置是从零开始的,这意味着它从零开始计数。所以,如果你需要默认打开第 3 个部分,你需要在“活动部分”字段中输入“2”。 

选项卡 1

选项卡 1 内容

选项卡 2

选项卡 2 内容

选项卡 3

选项卡 3 内容 

可折叠

你也可以禁用“可折叠”设置,那么至少会始终有一个部分处于打开状态。

选项卡 1

选项卡 1 内容 

选项卡 2

选项卡 2 内容

选项卡 3

选项卡 3 内容

全部关闭且可折叠

选项卡 1

选项卡 1 内容

选项卡 2

选项卡 2 内容  

选项卡 3

选项卡 3 内容

禁用选项卡

选项卡 1

选项卡 1 内容

选项卡 2

选项卡 2 内容

选项卡 3

选项卡 3 内容 

高度样式:自动

选项卡 1

Lorem Ipsum 只是印刷和排版行业的虚拟文本。自 1500 年代以来,Lorem Ipsum 一直是行业的标准虚拟文本,当时一位不知名的印刷工人将一盘文字打乱制作成一本样本书。它不仅流传了五个世纪,还跨越了电子排版的转变,基本保持不变。它在 20 世纪 60 年代因 Letraset 印刷的包含 Lorem Ipsum 段落的字帖而流行起来,最近则因 Aldus PageMaker 等桌面出版软件(其中包含 Lorem Ipsum 的不同版本)而更加普及。

选项卡 2

Lorem Ipsum 只是印刷和排版行业的虚拟文本。自 1500 年代以来,Lorem Ipsum 一直是行业的标准虚拟文本,当时一位不知名的印刷工人将一盘文字打乱制作成一本样本书。它不仅流传了五个世纪,还跨越了电子排版的转变,基本保持不变。它在 20 世纪 60 年代因 Letraset 印刷的包含 Lorem Ipsum 段落的字帖而流行起来,最近则因 Aldus PageMaker 等桌面出版软件(其中包含 Lorem Ipsum 的不同版本)而更加普及。

Lorem Ipsum 只是印刷和排版行业的虚拟文本。自 1500 年代以来,Lorem Ipsum 一直是行业的标准虚拟文本,当时一位不知名的印刷工人将一盘文字打乱制作成一本样本书。它不仅流传了五个世纪,还跨越了电子排版的转变,基本保持不变。它在 20 世纪 60 年代因 Letraset 印刷的包含 Lorem Ipsum 段落的字帖而流行起来,最近则因 Aldus PageMaker 等桌面出版软件(其中包含 Lorem Ipsum 的不同版本)而更加普及。

选项卡 3

Lorem Ipsum 只是印刷和排版行业的虚拟文本。自 1500 年代以来,Lorem Ipsum 一直是行业的标准虚拟文本,当时一位不知名的印刷工人将一盘文字打乱制作成一本样本书。它不仅流传了五个世纪,还跨越了电子排版的转变,基本保持不变。它在 20 世纪 60 年代因 Letraset 印刷的包含 Lorem Ipsum 段落的字帖而流行起来,最近则因 Aldus PageMaker 等桌面出版软件(其中包含 Lorem Ipsum 的不同版本)而更加普及。

高度样式:填充

选项卡 1

Lorem Ipsum 只是印刷和排版行业的虚拟文本。自 1500 年代以来,Lorem Ipsum 一直是行业的标准虚拟文本,当时一位不知名的印刷工人将一盘文字打乱制作成一本样本书。它不仅流传了五个世纪,还跨越了电子排版的转变,基本保持不变。它在 20 世纪 60 年代因 Letraset 印刷的包含 Lorem Ipsum 段落的字帖而流行起来,最近则因 Aldus PageMaker 等桌面出版软件(其中包含 Lorem Ipsum 的不同版本)而更加普及。

选项卡 2

Lorem Ipsum 只是印刷和排版行业的虚拟文本。自 1500 年代以来,Lorem Ipsum 一直是行业的标准虚拟文本,当时一位不知名的印刷工人将一盘文字打乱制作成一本样本书。它不仅流传了五个世纪,还跨越了电子排版的转变,基本保持不变。它在 20 世纪 60 年代因 Letraset 印刷的包含 Lorem Ipsum 段落的字帖而流行起来,最近则因 Aldus PageMaker 等桌面出版软件(其中包含 Lorem Ipsum 的不同版本)而更加普及。

Lorem Ipsum 只是印刷和排版行业的虚拟文本。自 1500 年代以来,Lorem Ipsum 一直是行业的标准虚拟文本,当时一位不知名的印刷工人将一盘文字打乱制作成一本样本书。它不仅流传了五个世纪,还跨越了电子排版的转变,基本保持不变。它在 20 世纪 60 年代因 Letraset 印刷的包含 Lorem Ipsum 段落的字帖而流行起来,最近则因 Aldus PageMaker 等桌面出版软件(其中包含 Lorem Ipsum 的不同版本)而更加普及。

选项卡 3

Lorem Ipsum 只是印刷和排版行业的虚拟文本。自 1500 年代以来,Lorem Ipsum 一直是行业的标准虚拟文本,当时一位不知名的印刷工人将一盘文字打乱制作成一本样本书。它不仅流传了五个世纪,还跨越了电子排版的转变,基本保持不变。它在 20 世纪 60 年代因 Letraset 印刷的包含 Lorem Ipsum 段落的字帖而流行起来,最近则因 Aldus PageMaker 等桌面出版软件(其中包含 Lorem Ipsum 的不同版本)而更加普及。