如何使用 Shaden UI 构建一个可动画化的阴影效果标签组件

通过Shadcn Space CLI安装组件

Shadcn Space是一个收录了已准备好可供实际使用的、与Shadcn/ui兼容的组件的注册库。您可以直接使用Shadcn CLI将这些组件导入到您的项目中，而无需从头开始构建它们。

请查阅他们的入门指南，了解如何将Shadcn CLI与第三方注册库配合使用。

根据您使用的包管理器，运行以下命令之一：

pnpm

pnpm dlx shadcn@latest add @shadcn-space/tabs-01

npm

npx shadcn@latest add @shadcn-space/tabs-01

Yarn

yarn dlx shadcn@latest add @shadcn-space/tabs-01

Bun

bunx --bun shadcn@latest add @shadcn-space/tabs-01

这样，该组件文件就会被导入到您的项目中，并且会自动与您现有的Shadcn/ui主题设置进行关联。之后您可以根据需要对其进行自定义或扩展，而这正是本教程所要教授的内容。

了解组件的结构

在编写任何代码之前，让我们先仔细看看这个组件的整体构成，并将其分解成各个逻辑部分。以下是该组件的完整实现代码：

"use client";

import { useState } from "react";
import { motion } from "motion/react";
import { cn } from "@/lib/utils";

type Tab = {
  title: string;
  value: string;
  content?: React.ReactNode;
};

type TabsProps = {
  tabs: Tab[];
    containerClassName?: string;
  activeTabClassName?: string;
  tabClassName?: string;
  contentClassName?: string;
};

const tabs = [
  {
    title: "产品",
    value: "product",
    content: (
      

        
产品选项卡
      
    ),
  },
  {title: "服务",
    value: "services",
    content: (
      

        
服务选项卡
      
    ),
  },
  {
    title: "测试区",
    value: "playground",
    content: (
      

        
测试区选项卡
      
    ),
  },
  {
    title: "内容",
    value: "content",
    content: (
      

        
内容选项卡
      
    ),
  },
  {
    title: "随机",
    value: "random",
    content: (
      

        
随机选项卡
      
    ),
  },
];

const Tabs = ({
  tabs,
  containerClassName,
  activeTabClassName,
  tabClassName,
  contentClassName,
}: TabsProps) => {
  const [activeIdx, setActiveIdx] = useState(0);
  const [hovering, setHovering] = useState(false);

  const handleSelect = (idx: number) => {
    setActiveIdx(idx);
  };

  const reorderedTabs = [
    tabs[activeIdx],
    ...tabs.filter((_, i) => i !== activeIdx),
  ];

  return (
    

      

        {tabs.map((tab, idx) => {
          const isActive = idx === activeIdx;
          return (
             handleSelect(idx)}
              onMouseEnter={() =&> setHovering(true)}
              onMouseLeave={() =&> setHovering(false)
              className={cn("relative px-4 py-2 rounded-full", tabClassName)}
              style={{ transformStyle: "preserve-3d" }}
            >
              {isActive && amp; (
                
              )
            
                {tab.title}
              
            
          );
        ))}
      
      
    
  );
};

type FadeInStackProps = {
  className?: string;
  tabs: Tab[];
  hovering?: boolean;
};

const FadeInStack = ({ className, tabs, hovering }: FadeInStackProps) => {
  return (
    

      {tabs.map((tab, idx) => (
        
          {tab.content}
        
      ))}
    
  );
};

export default function AnimatedTabMotion() {
  return (
    

      
    
  );
}

现在，让我们逐一分析这些内容。

步骤1：定义标签页的数据类型

type Tab = {
title: string;
value: string;
content?: React.ReactNode;
};
type TabsProps = {
tabs: Tab[];
containerClassName?: string;
activeTabClassName?: string;
tabClassName?: string;
contentClassName?: string;
};

Tab类型定义了每个标签页项的结构：

• title——在标签按钮中显示的文本标签。

• value——用于识别每个标签页的唯一键（同时也作为Framer Motion中的layoutId）。

• content——一个可选的React.ReactNode，这意味着你可以使用任何JSX代码作为面板内容。

TabsProps类型使得Tabs组件具有很高的可组合性。每个视觉层都可以通过设置className来改变样式，因此你可以在不修改核心逻辑的情况下，独立地重新设计活动标签页、各个标签按钮以及内容区域。

步骤2：构建标签页数据数组

const tabs = [
{
title: “产品”,
value: “product”,
content: (

产品标签页

), }, // ... 其他标签页 };

每个标签页的content都是使用Shadcn/ui中的语义化标记进行样式的，比如bg-muted、text-foreground和border-border。这样设计是有意为之：这些标记会自动适应你的浅色/深色主题设置，而无需额外配置。

你可以用任何实际内容替换这些占位符

const [activeIdx, setActiveIdx] = useState(0);
const [hovering, setHovering] = useState(false);

const reorderedTabs = [
tabs[activeIdx],
…tabs.filter((_, i) => i !== activeIdx),
];

>
    {isActive && (
       >
      {tab.title}
     
  
);
})}

const FadeInStack = ({ className, tabs, hovering }: FadeInStackProps) => {
  return (
    
>
          {tab.content}
        
      ))}
    

  );
};

export default function AnimatedTabMotion() {
  return (
    

      
    
  );
}

<Tabs
  tabs={tabs}
  containerClassName="gap-1"
  tabClassName="text-xs px-3 py-1.5"
  activeTabClassName="bg-zinc-900 dark:bg-white"
  contentClassName="mt-6"
/>

const tabs = [
  {
    title: "概述",
    value: "overview",
    content: (
      
产品概述</h2>
        
</p>
      
>
    ),
  },
  // ...
];