UI 组件库

概述

VideoFly 使用 shadcn/ui 作为基础 UI 组件库，这是一个基于 Radix UI 和 Tailwind CSS 构建的组件集合。

导入

import { Button, Card, Input } from '@/components/ui';

Button

多功能按钮组件，支持多种变体和尺寸。

import { Button } from '@/components/ui';
 
// 变体
<Button variant="default">默认</Button>
<Button variant="secondary">次要</Button>
<Button variant="outline">轮廓</Button>
<Button variant="ghost">幽灵</Button>
<Button variant="destructive">破坏性</Button>
<Button variant="link">链接</Button>
 
// 尺寸
<Button size="default">默认</Button>
<Button size="sm">小</Button>
<Button size="lg">大</Button>
<Button size="icon">图标</Button>

Button 属性

Prop	Type	Default
`variant`	`"default" \| "secondary" \| "outline" \| "ghost" \| "destructive" \| "link"`	`"default"`
`size`	`"default" \| "sm" \| "lg" \| "icon"`	`"default"`
`disabled`	`boolean`	`false`

Card

用于分组相关内容的容器组件。

import { Card } from '@/components/ui';
 
<Card>
  <CardHeader>
    <CardTitle>卡片标题</CardTitle>
    <CardDescription>卡片描述</CardDescription>
  </CardHeader>
  <CardContent>
    主要内容在这里
  </CardContent>
  <CardFooter>
    页脚内容
  </CardFooter>
</Card>

Input

表单文本输入组件。

import { Input } from '@/components/ui';
 
<Input type="text" placeholder="输入文本..." />
<Input type="email" placeholder="输入邮箱..." />
<Input type="password" placeholder="输入密码..." />
<Input disabled placeholder="禁用状态..." />

Dialog

模态对话框组件。

import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from '@/components/ui';
 
<Dialog>
  <DialogTrigger asChild>
    <Button>打开对话框</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>对话框标题</DialogTitle>
      <DialogDescription>
        对话框描述内容
      </DialogDescription>
    </DialogHeader>
    <div>对话框内容</div>
    <DialogFooter>
      <Button type="submit">确认</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Select

下拉选择组件。

import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
  SelectGroup,
  SelectLabel,
  SelectSeparator,
} from '@/components/ui';
 
<Select>
  <SelectTrigger>
    <SelectValue placeholder="选择选项" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>水果</SelectLabel>
      <SelectItem value="apple">苹果</SelectItem>
      <SelectItem value="banana">香蕉</SelectItem>
      <SelectItem value="orange">橙子</SelectItem>
    </SelectGroup>
    <SelectSeparator />
    <SelectGroup>
      <SelectLabel>蔬菜</SelectLabel>
      <SelectItem value="carrot">胡萝卜</SelectItem>
      <SelectItem value="potato">土豆</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

Tabs

选项卡导航组件。

import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui';
 
<Tabs defaultValue="tab1">
  <TabsList>
    <TabsTrigger value="tab1">选项卡 1</TabsTrigger>
    <TabsTrigger value="tab2">选项卡 2</TabsTrigger>
    <TabsTrigger value="tab3">选项卡 3</TabsTrigger>
  </TabsList>
  <TabsContent value="tab1">内容 1</TabsContent>
  <TabsContent value="tab2">内容 2</TabsContent>
  <TabsContent value="tab3">内容 3</TabsContent>
</Tabs>

Accordion

可折叠的手风琴组件。

import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from '@/components/ui';
 
<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>项目 1</AccordionTrigger>
    <AccordionContent>
      项目 1 的内容
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>项目 2</AccordionTrigger>
    <AccordionContent>
      项目 2 的内容
    </AccordionContent>
  </AccordionItem>
</Accordion>

Alert

警告和通知组件。

import { Alert, AlertDescription, AlertTitle } from '@/components/ui';
 
// 默认
<Alert>
  <AlertTitle>提示</AlertTitle>
  <AlertDescription>
    这是一条提示信息
  </AlertDescription>
</Alert>
 
// 破坏性
<Alert variant="destructive">
  <AlertTitle>错误</AlertTitle>
  <AlertDescription>
    这是一条错误信息
  </AlertDescription>
</Alert>

Table

数据表格组件。

import {
  Table,
  TableHeader,
  TableRow,
  TableHead,
  TableBody,
  TableCell,
} from '@/components/ui';
 
<Table>
  <TableHeader>
    <TableRow>
      <TableHead>名称</TableHead>
      <TableHead>状态</TableHead>
      <TableHead>操作</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>项目 1</TableCell>
      <TableCell>进行中</TableCell>
      <TableCell>...</TableCell>
    </TableRow>
  </TableBody>
</Table>

Badge

状态和标签徽章。

import { Badge } from '@/components/ui';
 
<Badge>默认</Badge>
<Badge variant="secondary">次要</Badge>
<Badge variant="outline">轮廓</Badge>
<Badge variant="destructive">破坏性</Badge>

Skeleton

加载占位符。

import { Skeleton } from '@/components/ui';
 
<div className="flex items-center space-x-4">
  <Skeleton className="h-12 w-12 rounded-full" />
  <div className="space-y-2">
    <Skeleton className="h-4 w-[250px]" />
    <Skeleton className="h-4 w-[200px]" />
  </div>
</div>

组件	用途
Avatar	用户头像显示
Checkbox	复选框输入
Dropdown Menu	下拉菜单导航
Popover	浮层弹出内容
Progress	进度条
Radio Group	单选按钮组
Scroll Area	自定义滚动区域
Separator	分隔线
Slider	滑块输入
Switch	开关切换
Tabs	标签页
Textarea	多行文本输入
Toast	通知提示
Tooltip	工具提示

完整列表

查看 shadcn/ui 官方文档获取完整组件列表。

返回组件

返回组件概览

概述

导入