Generate a tabbed content interface with smooth transitions between panels.
Generates tabbed content interfaces with smooth transitions and multiple style variations.
/plugin marketplace add vcode-sh/vibe-tools/plugin install greenshift-blocks@vibe-toolsGenerate a tabbed content interface with smooth transitions between panels.
greenshift-blocks skill documentation, specifically docs/08-variations.md for tabs structure.gs_root (container, isVariation: "tabs")
├── .gs_tabs_list (tablist container, isVariation: "tablist")
│ ├── button.gs_tab.active (first tab)
│ ├── button.gs_tab (other tabs)
│ └── ...
└── .gs_content_area
├── .gs_content.active (first panel, visible)
├── .gs_content (other panels, hidden)
└── ...
{
"isVariation": "tabs",
"className": "gs_tabs_XXX gs_root",
"dynamicAttributes": [{"name": "data-type", "value": "tabs-component"}],
"styleAttributes": {
"display": ["flex"],
"flexDirection": ["column"]
}
}
{
"isVariation": "tablist",
"className": "gs_tabs_list",
"dynamicAttributes": [{"name": "role", "value": "tablist"}],
"styleAttributes": {
"display": ["flex"],
"flexDirection": ["row"],
"columnGap": ["15px"],
"rowGap": ["15px"],
"flexWrap": ["wrap"]
}
}
{
"tag": "button",
"className": "gs_click_sync gs_tab active",
"formAttributes": {"type": "button"},
"dynamicAttributes": [
{"name": "role", "value": "tab"},
{"name": "aria-selected", "value": "true"}
]
}
{
"tag": "button",
"className": "gs_click_sync gs_tab",
"formAttributes": {"type": "button"},
"dynamicAttributes": [
{"name": "role", "value": "tab"},
{"name": "aria-selected", "value": "false"}
]
}
{
"className": "gs_content active",
"dynamicAttributes": [
{"name": "role", "value": "tabpanel"},
{"name": "aria-hidden", "value": "false"}
]
}
{
"className": "gs_content",
"dynamicAttributes": [
{"name": "role", "value": "tabpanel"},
{"name": "aria-hidden", "value": "true"}
]
}
.gs_tab - Tab button styling (background, padding, layout, transition) .gs_tab.active - Active tab state (different background/color) .gs_tab svg - Optional SVG icons in tabs .gs_tab.active svg - SVG icons in active tabs .gs_content - Hidden panel state (max-height: 0, opacity: 0) .gs_content.active - Visible panel state (max-height: 5000px, opacity: 1) .gs_content > .gs_content_inner - Inner content padding#0000000d#000000#000000 / Active: #fffall 0.5s easemax-height: 0px, opacity: 0max-height: 5000px, opacity: 1opacity 0.5s, max-height 0.5s cubic-bezier(0.42, 0, 0.58, 1)Include SVG icon before tab title span:
<!-- wp:greenshift-blocks/element {"tag":"svg","icon":{"icon":{"font":"rhicon rhi-home"},"type":"font"},"className":"gs_icon"} -->
<svg>...</svg>
<!-- /wp:greenshift-blocks/element -->
.active class.active class and aria-hidden="false"tabs-features.html)IMPORTANT: Always save output to a .html file. Never just display the code in chat.