分頁小工具會使用 <devsite-selector> 自訂元素來整理具有多個表示法的資料，例如不同程式設計語言的程式碼範例，或是以不同格式 (例如 JSON、YAML) 表示的資料結構。或 XML)。
一般使用說明
以下範例使用 <devsite-selector> 自訂元素使用 HTML 轉譯三個分頁區段。
分頁 1 標題
分頁 1 內容
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
ememper 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
neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
分頁 3 標題
Tab 3 Content
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, conectetur adipiscing elit.
分頁 3 標題
Tab 3 Content
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> 自訂元素，但因為其中的分頁太多而符合畫面大小，且會自動溢位至 [More] 下拉式選單。
蘋果
有關蘋果的內容
杏桃
杏仁相關內容
酪梨
酪梨相關內容
無花果
無花果相關內容
葡萄
葡萄主題相關內容
基夫里魯特
有關 Kiwifruit 的內容
檸檬
檸檬相關內容
萊姆
萊姆
芒果
芒果相關內容
桃子
珍珠相關內容
以下範例使用 Markdown 語法來呈現相同的溢位選單。
蘋果
有關蘋果的內容
杏桃
杏仁相關內容
酪梨
酪梨相關內容
無花果
無花果相關內容
葡萄
葡萄主題相關內容
基夫里魯特
有關 Kiwifruit 的內容
檸檬
檸檬相關內容
萊姆
萊姆
芒果
芒果相關內容
桃子
珍珠相關內容
多個分頁小工具中的分頁名稱重複
只要點選某個分頁標籤，就會影響網頁上其他包含相同語法的相同文字分頁。例如，按一下下方小工具中的 [Apples] 或 [Apricots] 也會影響前一個區段中的第二個小工具，因為這兩個小工具都是由 Markdown 所建構。
蘋果
更多有關蘋果的內容！
杏桃
更多有關同年公主的內容！
自訂分頁小工具
雖然您可以使用 Markdown 建構分頁小工具，但您必須使用 HTML 語法來指派自訂屬性。
分頁文字自動換行
如果文字超出 DevSite 設定的分頁寬度上限，就會遭到裁剪並附加刪節號。以下範例使用 <devsite-selector> 自訂元素中的 two-line-tab 類別來包裝第二個分頁中的文字。
這是不包裝的長標籤
這個標籤不可換行。
這個標籤會換行至第二行
這個分頁的標籤會固定在第二行。
標籤較小的標籤文字會換行
下列範例會將 two-line-tab 設為第一行，並將 tab-label 設為 <devsite-selector> 自訂元素中的第二行，在兩行分頁的第二行顯示較小的標籤。 。
Swift
這個分頁含有 Swift 標籤。
Java
不過，這個兩行分頁的 Android 標籤在 Java 標籤下方較小。
Kotlin
不過，這個兩行分頁使用的 Android 標籤就比 Kotlin 標籤更小。
Java
這個分頁含有 Java 標籤。
直接連結到特定分頁
以下範例會在 <devsite-selector> 自訂元素中指定 id，直接連結到特定分頁。
酷
這個分頁是預設分頁，但您可以使用 #cobol 錨點。
Fortran
您只要將 #fortran 錨點附加至連結，即可直接連結至這個分頁。
Haskell
這個分頁會使用連結中的 #haskell 錨點。
建立連結後，所有小工具會在同一個分頁中開啟
下列連結將查詢參數 ?tab=Apricots 附加至這個網頁的網址，並在所有選取器上開啟「Apricots」分頁：
https://www.devsitetest.how/integration-tests/widgets/tabs?tab=Apricots