mirror of
https://github.com/hugo-fixit/FixIt.git
synced 2026-08-24 15:28:57 +00:00
Cell
fdfd772100
* feat(File Tree): add `file-tree` shortcode support * feat(file-tree): add ignoreList parameter to file-tree shortcode * feat(file-tree): enhance file-tree shortcode with ignoreList and folderSlash options * feat(file-tree): enhance file-tree shortcode to support data mode * feat(file-tree): enhance file-tree shortcode to support file mode * feat(file-tree): improve content parsing in file-tree shortcode * feat(file-tree): improve root path validation and error handling in filesystem mode * test(file-tree): add unit tests for `file-tree` shortcode * feat(file-tree): add file-tree code block rendering support * refactor(file-tree): extract filesystem scanning to get-file-tree partial Move directory traversal and root path validation to a separate partial function, consolidating all filesystem-related logic in one place. This simplifies the shortcode implementation and ensures a unified data format for rendering. * docs(readme): extend code fence and shortcode support for file tree in documentation * feat(file-tree): add fullRootName parameter for root path display in file tree * feat(file-tree): add language parameter to get-file-tree function * feat(file-tree): add highlightList parameter for file-tree shortcode * perf(file-tree): add level param for get-file-tree function to descend only level directories deep
220 lines
4.1 KiB
Markdown
220 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 >}}
|