Cell
56836eb077
* feat: add tabs and tab shortcodes support Powered by https://github.com/github/tab-container-element * fix: adjust tab-container styles for improved layout and responsiveness - [x] Underline Style (Default) - [x] Pill Style - [x] Card Style - [x] Segment Style * test: add tabs comprehensive test cases * style: code optimization * fix: add tabs support in home scope * docs: add `<tab-container>` element reference to README files * feat: enhance tab-container with loading mixin and simplify code * refactor: update variable references to use root prefix in styles * docs: add tabs shortcode support to README files * fix: ensure shortcode is enclosed within a tabs block * feat: add responsive design for tab-container on smaller screens * test: remove unnecessary placement attribute for segment tabs * refactor: remove unused vertical attribute from tabs shortcode * fix: set default tab type to 'underline' for consistency * refactor: update tab-button and tab-panel selectors for improved specificity
3.0 KiB
title, date, collections, categories, tags
| title | date | collections | categories | tags | ||||
|---|---|---|---|---|---|---|---|---|
| Tabs Comprehensive Test Cases | 2025-09-09T10:00:00+08:00 |
|
|
|
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:
- First item
- Second item
- 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 >}}