109k
新建

骨架屏 (Skeleton)

上一页下一页

用于在内容加载时显示占位符。

Radix UIBase UI
Radix UI - shadcn/ui 组件库
import { Skeleton } from "@/components/ui/skeleton"

export function SkeletonDemo() {

安装

pnpm dlx shadcn@latest add skeleton

用法

import { Skeleton } from "@/components/ui/skeleton"
<Skeleton className="h-[20px] w-[100px] rounded-full" />

示例

头像

import { Skeleton } from "@/components/ui/skeleton"

export function SkeletonAvatar() {

卡片 (Card)

import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"

文本

import { Skeleton } from "@/components/ui/skeleton"

export function SkeletonText() {

表单

import { Skeleton } from "@/components/ui/skeleton"

export function SkeletonForm() {

表格

import { Skeleton } from "@/components/ui/skeleton"

export function SkeletonTable() {

RTL (从右至左)

要在 shadcn/ui 中启用 RTL 支持，请参阅 RTL 配置指南。

"use client"

import * as React from "react"