Skip to content

标签切换 TabCarousel

概览

TabCarousel 提供了一个清晰的标签导航系统，允许用户在同一区域内快速切换并查看不同的图文内容。

实时预览

全面的解决方案

针对不同行业需求，我们提供量身定制的 CMS 模版。

电商行业

电商行业

高转化率的产品详情页 and 活动聚合页。

了解更多行业案例

使用方法

import { TabCarousel } from '@goenhance/cms-ui';

const Example = () => (
  <TabCarousel
    title="功能特性"
    description="多样化的能力支持。"
    list={[
      { title: "选项 A", description: "...", mediaUrl: "..." }
    ]}
  />
);

属性说明 (Props)

属性	类型	默认值	说明
`title`	`string`	-	区域大标题
`description`	`string`	-	标题下的描述文本
`list`	`TabCarouselItem[]`	`[]`	标签项列表
`text`	`string`	-	行动按钮文字
`url`	`string`	-	行动按钮链接

TabCarouselItem

属性	类型	说明
`title`	`string`	标签标题
`description`	`string`	标签对应的详细描述
`mediaUrl`	`string`	对应展示的图片

特性

语义化导航：使用 role="tablist" 增强无障碍体验。
平滑切换：切换过程带有淡入效果。
品牌融合：选中状态自动应用品牌主色调背景。

主题覆盖

可覆盖变量

类名：mewx-cms-tab-carousel

变量名	用途	默认值
`--mewx-cms-tab-carousel-heading-text`	标题文字色	`var(--blocks-text-heading)`
`--mewx-cms-tab-carousel-body-text`	描述文字色	`var(--blocks-text-body)`
`--mewx-cms-tab-carousel-tab-active-bg`	激活标签背景	`var(--blocks-primary)`
`--mewx-cms-tab-carousel-tab-active-text`	激活标签文字色	`255 255 255`
`--mewx-cms-tab-carousel-tab-inactive-bg`	非激活标签背景	`var(--blocks-bg-card)`
`--mewx-cms-tab-carousel-tab-inactive-text`	非激活标签文字色	`var(--blocks-text-muted)`
`--mewx-cms-tab-carousel-tab-border`	标签边框	`var(--blocks-border)`
`--mewx-cms-tab-carousel-tab-hover-border`	标签悬停边框	`var(--blocks-border-hover)`
`--mewx-cms-tab-carousel-tab-hover-text`	标签悬停文字色	`var(--blocks-primary)`
`--mewx-cms-tab-carousel-panel-bg`	面板背景	`var(--blocks-bg-card)`
`--mewx-cms-tab-carousel-panel-shadow`	面板阴影	`var(--blocks-shadow-card)`
`--mewx-cms-tab-carousel-panel-border`	面板边框	`var(--blocks-border)`
`--mewx-cms-tab-carousel-item-heading`	内容标题色	`var(--blocks-text-heading)`
`--mewx-cms-tab-carousel-item-body`	内容描述色	`var(--blocks-text-muted)`
`--mewx-cms-tab-carousel-cta-bg`	CTA 按钮背景	`var(--blocks-gradient-primary)`
`--mewx-cms-tab-carousel-cta-text`	CTA 按钮文字色	`255 255 255`
`--mewx-cms-tab-carousel-cta-shadow`	CTA 按钮阴影	`var(--blocks-shadow-button)`

覆盖示例

/* 紫色标签轮播 */
.purple-tabs {
  --mewx-cms-tab-carousel-tab-active-bg: 139 92 246;
  --mewx-cms-tab-carousel-tab-hover-text: 139 92 246;
  --mewx-cms-tab-carousel-tab-hover-border: 196 181 253;
}

<TabCarousel className="purple-tabs" title="功能特性" list={[...]} text="了解更多" url="#" />