Tabs Comprehensive Test Cases

Lruihao included in Shortcodes and Tests

2025-09-09 About 600 words 3 minutes

Contents

Testing various configurations and nested scenarios for the Tabs shortcode.

See Types section for various test cases.

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

See Nested Tabs section for examples.

Types

Underline (Default)

Content for underline style tab 1

Content for underline style tab 2

Content for underline style tab 3

Pill

Content for pill style tab 1

Content for pill style tab 2

Content for pill style tab 3

Card

Content for card style tab 1

Content for card style tab 2

Content for card style tab 3

Segment

Content for segment style tab 1

Content for segment style tab 2

Content for segment style tab 3

Nested Tabs

This is the first outer tab with simple content.

Features:

Basic text content
No nested components
Simple layout

This outer tab contains nested tabs inside:

Nested tab A content with bold text and italic text.

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

Nested tab B content with a list:

First item
Second item
Third item

This is a blockquote inside a nested tab.

Nested tab C with a table:

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

This tab contains vertical nested tabs:

Content for vertical nested tab A.

Feature 1
Feature 2
Feature 3

Content for vertical nested tab B.

1
2
3
4
5
.example {
  color: #333;
  background: #f5f5f5;
  padding: 1rem;
}

Others

Mermaid Diagram inside Tabs

Diagram Code

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

1
2
3
4
5
6
flowchart TD
    A[Start] --> B{Is it?}
    B -->|Yes| C[OK]
    C --> D[Rethink]
    D --> B
    B ---->|No| E[End]

Diagram Code

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      : 24dgantt
    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      : 24dgantt
    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

1
2
3
4
5
6
7
8
9
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

File Tree inside Tabs

src
- index.ts
README.md

src
- index.ts
README.md

MathJax inside tabs

$c = \pm\sqrt{a^2 + b^2}$ and $f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi$

x = {-b \pm \sqrt{b^2-4ac} \over 2a}

f(a) = \frac{1}{2\pi i} \oint\frac{f(z)}{z-a}dz

Included in Collection・Tests 16

Alerts and Admonition Syntax Test KaTeX Test