Skeleton

Playground

Đổi brand, theme và hình dạng minh hoạ. "Hình dạng" ở đây không phải một prop của primitive — đó là bốn cách người gọi tự đặt className/style lên Skeleton. Primitive không có prop shape.

import { Skeleton } from "@nexobox/ui";

<div className="flex flex-col gap-2">
  <Skeleton className="h-4 w-full" />
  <Skeleton className="h-4 w-full" />
  <Skeleton className="h-4 w-2/3" />
</div>

Khi nào sử dụng

Anatomy

Bên trong Root có một lớp quét tuyệt đối để chạy animation, bị overflow: hidden của Root cắt gọn — đây là chi tiết dựng hình của phần Root, không phải một phần thứ hai mà người dùng đặt tên, style hay tắt riêng.

Variants & states

Không có variant, không có size, không có preset dòng chữ, không có preset hình tròn. Bốn hình dạng dưới đây chỉ là className khác nhau trên cùng một primitive.

Chỉ một trạng thái, và nó là trạng thái chờ. hover, focus, disabled, error, empty: không có — primitive không nhận tương tác và không đại diện cho dữ liệu.

Design tokens

Root đọc --nf-semantic-surface-subtle và --nf-foundation-radius-small. Vệt quét chạy bằng keyframe nf-shimmer đã có sẵn — một phép tịnh tiến ngang, không đổi độ sáng, nên không tính là chớp theo A14. Nó dùng thời lượng --nf-component-skeleton-shimmer-duration, easing --nf-foundation-motion-easing-standard, và dải sáng của nó trộn từ --nf-semantic-surface-raised qua color-mix(in srgb, …, transparent). Dưới prefers-reduced-motion: reduce, token này đổi sang --nf-component-skeleton-shimmer-duration-reduced (1400ms → 2800ms) — vệt quét chậm lại, không đứng hình, theo DS-014 clause 18. Luật này sống ở tầng token (nexoframe.tokens.css), component không chứa @media nào. Mở devtools, bật "giảm chuyển động" để tự kiểm.

API & triển khai

Accessibility & nội dung