标签页微件使用 <devsite-selector> 自定义元素来组织具有多种表示法的数据，例如采用不同编程语言的代码示例或由不同格式表示的数据结构（如 JSON、YAML、或 XML）。
一般用法
以下示例使用 <devsite-selector> 自定义元素通过 HTML 呈现三个标签页部分。
标签页 1 标题
标签页 1 内容
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor nec dictum sagittis Nunc Massa ipsum, mollis non neque sed, vulputate dignissim odio.
标签页 2 标题
标签页 2 内容
Curabitur semper tortor nec dictum sagittis. Nunc Massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
标签页 3 标题
标签页 3 内容
Nunc Massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper
tortor nec dictum sagittis.
以下示例使用 Markdown 语法呈现相同的三个标签页。
标签页 1 标题
标签页 1 内容
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper
tortor nec dictum sagittis Nunc Massa ipsum, mollis non neque sed,
vulputate dignissim odio.
标签页 2 标题
标签页 2 内容
Curabitur semper tortor nec dictum sagittis. Nunc Massa ipsum, mollis non Neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, conssectetur adipiscing elit.
标签页 3 标题
标签页 3 内容
Nunc Massa ipsum、mollis non neque sed、vulputate dignissim odio. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor nec dictum sagittis
有溢出菜单的标签页微件
以下示例使用的是 <devsite-selector> 自定义元素，但标签页过多，无法完全显示在屏幕上，因此会自动溢出到更多下拉菜单中。
苹果
与苹果相关的内容
杏子
杏子相关内容
牛油果
牛油果相关内容
无花果
关于无花果
葡萄
葡萄相关内容
奇异果
奇异果相关内容
柠檬
柠檬相关内容
酸橙
关于酸橙的内容
芒果
芒果相关内容
桃子
桃子的内容
以下示例使用 Markdown 语法呈现相同的溢出菜单。
苹果
与苹果相关的内容
杏子
杏子相关内容
牛油果
牛油果相关内容
无花果
关于无花果
葡萄
葡萄相关内容
奇异果
奇异果相关内容
柠檬
柠檬相关内容
酸橙
关于酸橙的内容
芒果
芒果相关内容
桃子
桃子的内容
多个标签页微件中存在重复的标签页名称
点击某个标签页会影响页面上所有其他具有相同语法文本的标签页。例如，点击下方微件中的 Apples 或 Apricots 也会影响上一部分中的第二个微件，因为它们都是使用 Markdown 构建的。
苹果
更多有关苹果的内容！
杏子
还有更多有关杏子的内容！
自定义标签页微件
您可以使用 Markdown 构建标签页微件，但需要使用 HTML 语法来分配自定义属性。
在标签页中封装文本
如果文本超出 DevSite 设置的标签页的最大宽度，则会被截短并以省略号代替。以下示例使用 <devsite-selector> 自定义元素中的 two-line-tab 类将文本封装在第二个标签页中。
这是一个过长的自动换行标签
此标签不会换行。
此标签会换行至第二行
此标签页的标签会换行至另一行。
使用较小的标签封装文本
以下示例将 <devsite-selector> 自定义元素中的 two-line-tab 设置为第一行，将 tab-label 设置为第二行，以在两行标签页的第二行显示较小的标签。
Swift
此标签页具有 Swift 标签。
Java
此两行式标签页在 Java 标签下方具有较小的 Android 标签。
Kotlin
此两行式标签页在 Kotlin 标签下方具有较小的 Android 标签。
Java
此标签页有一个 Java 标签。
直接链接到特定标签页
以下示例通过在 <devsite-selector> 自定义元素中指定 id 直接链接到并打开特定的标签页。
钴
此为默认标签页，但您可以使用 #cobol 锚点。
Fortran
您可以通过将 #fortran 锚点附加到链接中来直接链接到此标签页。
Haskell
此标签页将使用您链接中的 #haskell 锚标记。
创建链接，将所有微件打开到同一标签页
以下链接会将查询参数 ?tab=Apricots 附加到相应网页的网址，并在所有选择器上均打开 Apricots 标签页的情况下加载该网页：
https://www.devsitetest.how/integration-tests/widgets/tabs?tab=Apricots