Neumorphism UI
数据与反馈@neumorphism-ui/skeleton

Skeleton

一个基于 div 的简单 pulse placeholder。它只提供视觉加载轮廓，并通过 aria-hidden=true 对辅助技术隐藏。

@neumorphism-ui/skeleton
Registry JSON

预览

安装

安装: skeletonnpx shadcn@latest add @neumorphism-ui/skeleton

CLI 会依次处理 npm 依赖、base token、utils 和组件源码。

首次使用此 Registry？请先完成 namespace 配置 。

用法

Import

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

Example

Skeleton 用法代码
<div className="flex items-center gap-3" aria-busy="true">
  <span className="sr-only">正在加载个人资料</span>
  <Skeleton className="size-12 rounded-full" />
  <div className="grid flex-1 gap-2">
    <Skeleton className="h-4 w-1/3" />
    <Skeleton className="h-3 w-2/3" />
  </div>
</div>

API 参考

组件属性类型默认值说明
SkeletonclassName必填string—设置 placeholder 的宽度、高度和 radius。
Skeletonaria-hiddenbooleantrue将装饰性 placeholder 从无障碍树中隐藏。

无障碍

  • 01

    Skeleton 本身设置了 aria-hidden，因此应在周围另行提供 sr-only 状态文案或 role=status。

  • 02

    加载区域可按需设置 aria-busy=true，并在加载完成后移除。

  • 03

    pulse 动画会依据全局 prefers-reduced-motion 规则基本停用。