FixIt/apps/test/content/posts/tabs-comprehensive-test.md

title, date, collections, categories, tags

title	date	collections	categories	tags
Tabs Comprehensive Test Cases	2025-09-09T10:00:00+08:00	Tests	Shortcodes	Tabs UI Components

Testing various configurations and nested scenarios for the Tabs shortcode.

{{< tabs >}} {{% tab title="Test Cases" %}}See Types section for various test cases.{{% /tab %}} {{% tab title="Nested Tabs" %}}See Nested Tabs section for examples.{{% /tab %}} {{< /tabs >}}

Types

Underline (Default)

{{< tabs placement="top" >}} {{% tab title="Tab 1" %}}Content for underline style tab 1{{% /tab %}} {{% tab title="Tab 2" %}}Content for underline style tab 2{{% /tab %}} {{% tab title="Tab 3" %}}Content for underline style tab 3{{% /tab %}} {{< /tabs >}}

Pill

{{< tabs type="pill" placement="top" >}} {{% tab title="Tab 1" %}}Content for pill style tab 1{{% /tab %}} {{% tab title="Tab 2" %}}Content for pill style tab 2{{% /tab %}} {{% tab title="Tab 3" %}}Content for pill style tab 3{{% /tab %}} {{< /tabs >}}

Card

{{< tabs type="card" placement="top" >}} {{% tab title="Tab 1" %}}Content for card style tab 1{{% /tab %}} {{% tab title="Tab 2" %}}Content for card style tab 2{{% /tab %}} {{% tab title="Tab 3" %}}Content for card style tab 3{{% /tab %}} {{< /tabs >}}

Segment

{{< tabs type="segment" >}} {{% tab title="Tab 1" %}}Content for segment style tab 1{{% /tab %}} {{% tab title="Tab 2" %}}Content for segment style tab 2{{% /tab %}} {{% tab title="Tab 3" %}}Content for segment style tab 3{{% /tab %}} {{< /tabs >}}

Nested Tabs

{{< tabs defaultTab=0 >}}

{{% tab title="Outer Tab 1" %}} This is the first outer tab with simple content.

Features:

• Basic text content
• No nested components
• Simple layout {{% /tab %}}

{{% tab title="Outer Tab 2" %}} This outer tab contains nested tabs inside:

{{< tabs type="pill" defaultTab=1 >}}

{{% tab title="Inner A" %}} Nested tab A content with bold text and italic text.

console.log('Hello from nested tab A!')

{{% /tab %}}

{{% tab title="Inner B" %}} Nested tab B content with a list:

1. First item
2. Second item
3. Third item

This is a blockquote inside a nested tab. {{% /tab %}}

{{% tab title="Inner C" %}} Nested tab C with a table:

Feature	Status	Notes
Responsive	✅	Works on all devices
Accessible	✅	Screen reader friendly
Fast	✅	Optimized performance

{{% /tab %}}

{{< /tabs >}}

{{% /tab %}}

{{% tab title="Outer Tab 3" %}} This tab contains vertical nested tabs:

{{< tabs type="card" vertical=true >}}

{{% tab title="Vertical A" %}} Content for vertical nested tab A.

• Feature 1
• Feature 2
• Feature 3 {{% /tab %}}

{{% tab title="Vertical B" %}} Content for vertical nested tab B.

.example {
  color: #333;
  background: #f5f5f5;
  padding: 1rem;
}

{{% /tab %}}

{{< /tabs >}}

{{% /tab %}}

{{< /tabs >}}

Others

Mermaid Diagram inside Tabs

{{< tabs >}} {{% tab title="Flowchart" %}}

flowchart TD
    A[Start] --> B{Is it?}
    B -->|Yes| C[OK]
    C --> D[Rethink]
    D --> B
    B ---->|No| E[End]

{{% /tab %}} {{% tab title="Gantt Chart" %}}

gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    another task      : 24d

{{% /tab %}} {{< /tabs >}}

File Tree inside Tabs

{{< tabs >}} {{% tab title="File Tree Shortcode" %}}

{{< file-tree >}} filetree name = "src" type = "dir"

filetree.children name = "index.ts" type = "file"

filetree name = "README.md" type = "file" {{< /file-tree >}}

{{% /tab %}} {{% tab title="File Tree Code Block" %}}

[[filetree]]
name = "src"
type = "dir"

[[filetree.children]]
name = "index.ts"
type = "file"

[[filetree]]
name = "README.md"
type = "file"

{{% /tab %}} {{< /tabs >}}