🌐 Nodejs.cn
新建

骨架

PreviousNext

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

Radix UIBase UI
import { Skeleton } from "@/components/ui/skeleton"

export function SkeletonDemo() {

安装

🌐 Installation

pnpm dlx shadcn@latest add skeleton

用法

🌐 Usage

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

示例

🌐 Examples

头像

🌐 Avatar

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

export function SkeletonAvatar() {

卡片

🌐 Card

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

文本

🌐 Text

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

export function SkeletonText() {

表单

🌐 Form

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

export function SkeletonForm() {

表格

🌐 Table

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

export function SkeletonTable() {

从右到左

🌐 RTL

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

🌐 To enable RTL support in shadcn/ui, see the RTL configuration guide.

"use client"

import * as React from "react"