Tabs Comprehensive Test Cases

Lruihao included in Shortcodes and Tests

2025-09-09 About 500 words 3 minutes

Contents

Testing various configurations and nested scenarios for the Tabs shortcode.

See Types section for various test cases.

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

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]

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

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

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

Included in Collection・Tests 12

Alerts and Admonition Syntax Test KaTeX Test