mirror of
https://github.com/hugo-fixit/FixIt.git
synced 2026-08-24 15:28:57 +00:00
Cell
3926cc0220
* refactor: CSS variables to use fixit-var for consistency across styles * refactor: reorganize CSS structure and consolidate imports for improved maintainability * refactor: unify CSS variable usage and improve structure across stylesheets * refactor: standardize CSS variable usage for layout * refactor: standardize CSS variable usage for archive and special pages * refactor: standardize CSS variable usage for single page * refactor: standardize CSS variable usage for widgets * refactor(css): refactors the border-radius mixin and adds the .rounded-full utility class * refactor: standardize z-index usage across components * refactor(css): removes deprecated compatibility mixins and replaces them with native CSS properties * feat: unify color variable naming and update theme color values - Rename `global-font-secondary-color` to `global-placeholder-color` for more accurate description of its purpose - Update multiple style references to use the new `secondary` theme color variable - Update theme color mapping to the new color values for improved visual consistency - Fixed the use of search box placeholder colors and removed hard-coded transparency values - Added color preview test documentation for easier verification of color rendering - Cleaned up some duplicate dark mode styles and replaced them with unified CSS variables * refactor: remove the `hr-background-color` variable and uses `global-border-color` uniformly * feat(CSE): add dark theme style to Google CSE search box and results container * fix(task-lists): fixed styling and rendering issues with nested task lists
219 lines
4.1 KiB
Markdown
219 lines
4.1 KiB
Markdown
---
|
|
title: Tabs Comprehensive Test Cases
|
|
date: 2025-09-09T10:00:00+08:00
|
|
collections:
|
|
- Tests
|
|
categories:
|
|
- Shortcodes
|
|
tags:
|
|
- 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 >}}
|
|
|
|
<!--more-->
|
|
|
|
## Types
|
|
|
|
### Underline (Default)
|
|
|
|
<!-- placement: top, bottom, left, right -->
|
|
|
|
{{< 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
|
|
|
|
<!-- placement: top, bottom, left, right -->
|
|
|
|
{{< 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
|
|
|
|
<!-- placement: top, bottom, left, right -->
|
|
|
|
{{< 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_.
|
|
|
|
```javascript
|
|
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.
|
|
|
|
```css
|
|
.example {
|
|
color: #333;
|
|
background: #f5f5f5;
|
|
padding: 1rem;
|
|
}
|
|
```
|
|
|
|
{{% /tab %}}
|
|
|
|
{{< /tabs >}}
|
|
|
|
{{% /tab %}}
|
|
|
|
{{< /tabs >}}
|
|
|
|
## Others
|
|
|
|
### Mermaid Diagram inside Tabs
|
|
|
|
{{< tabs >}}
|
|
{{% tab title="Flowchart" %}}
|
|
|
|
```mermaid
|
|
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" %}}
|
|
|
|
```mermaid
|
|
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" %}}
|
|
|
|
```file-tree
|
|
[[filetree]]
|
|
name = "src"
|
|
type = "dir"
|
|
|
|
[[filetree.children]]
|
|
name = "index.ts"
|
|
type = "file"
|
|
|
|
[[filetree]]
|
|
name = "README.md"
|
|
type = "file"
|
|
```
|
|
|
|
{{% /tab %}}
|
|
{{< /tabs >}}
|