标签切换 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" 增强无障碍体验。
• 平滑切换：切换过程带有淡入效果。
• 品牌融合：选中状态自动应用品牌主色调背景。