组件示例

Toast 通知和加载骨架屏的完整示例

Toast 通知系统

点击下面的按钮查看不同类型的 Toast 通知

加载骨架屏

点击加载按钮查看骨架屏效果

点击上方按钮加载数据

表格加载示例

常见的列表/表格加载骨架屏

点击上方按钮加载数据

其他骨架屏样式

常见的 UI 元素加载状态

文章卡片

评论列表

💡 使用说明

Toast 通知

import { useToast } from '@/lib/hooks/use-toast';

const { toast } = useToast();

toast({
  title: '标题',
  description: '描述信息',
  variant: 'default', // 或 'destructive'
  duration: 5000, // 毫秒
});

骨架屏

import { Skeleton } from '@/components/ui/skeleton';

<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-12 w-12 rounded-full" />