Skeleton Line

import { SkeletonLine } from "@cloudflare/kumo";

export function SkeletonLineDemo() {
  return (
    <div className="flex w-64 flex-col gap-3">
      <SkeletonLine />
      <SkeletonLine />
      <SkeletonLine />
    </div>
  );
}

安装

import { SkeletonLine } from "@cloudflare/kumo";

自定义宽度

控制随机宽度的范围，让骨架屏看起来更自然。

import { SkeletonLine } from "@cloudflare/kumo";

export function SkeletonLineWidthDemo() {
  return (
    <div className="flex w-64 flex-col gap-3">
      <SkeletonLine minWidth={80} maxWidth={100} />
      <SkeletonLine minWidth={60} maxWidth={80} />
      <SkeletonLine minWidth={40} maxWidth={60} />
    </div>
  );
}

自定义高度

使用 Tailwind 工具类通过 className 覆盖默认高度。默认高度为 0.5rem。

import { SkeletonLine } from "@cloudflare/kumo";

export function SkeletonLineHeightDemo() {
  return (
    <div className="flex w-64 flex-col gap-3">
      <SkeletonLine className="h-2" />
      <SkeletonLine className="h-4" />
      <SkeletonLine className="h-6" />
      <SkeletonLine className="h-8" />
    </div>
  );
}

块高度

使用 blockHeight 设置容器的高度，该容器会在垂直方向上居中骨架线。在替换已知行高的文本时很有用。接受数字（视为 px）或任意 CSS 字符串值。

32px

48px

64px

import { SkeletonLine } from "@cloudflare/kumo";
import { ReactNode } from "react";

function DemoWrapper({
  label,
  children,
}: {
  label: string;
  children: ReactNode;
}) {
  return (
    <div className="relative">
      <div className="absolute top-0 right-full bottom-0 mr-2 flex items-center border-r-2 border-kumo-fill pr-2 text-sm">
        {label}
      </div>
      {children}
    </div>
  );
}

export function SkeletonLineBlockHeightDemo() {
  return (
    <div className="flex w-64 flex-col gap-1">
      <DemoWrapper label="32px">
        <SkeletonLine blockHeight={32} />
      </DemoWrapper>
      <DemoWrapper label="48px">
        <SkeletonLine blockHeight={48} />
      </DemoWrapper>
      <DemoWrapper label="64px">
        <SkeletonLine blockHeight={64} />
      </DemoWrapper>
    </div>
  );
}

卡片加载状态

使用骨架线为卡片和内容区域创建加载状态。

import { SkeletonLine } from "@cloudflare/kumo";

export function SkeletonLineCardDemo() {
  return (
    <div className="w-64 rounded-lg p-4 ring ring-kumo-hairline">
      <div className="mb-4 h-4">
        <SkeletonLine minWidth={40} maxWidth={60} />
      </div>
      <div className="flex flex-col gap-2">
        <SkeletonLine />
        <SkeletonLine />
        <SkeletonLine minWidth={50} maxWidth={70} />
      </div>
    </div>
  );
}

API 参考

属性	类型	默认值
minWidth	number	30
maxWidth	number	100
minDuration	number	1.3
maxDuration	number	1.7
minDelay	number	0
maxDelay	number	0.5
blockHeight	string \| number	-
className	string	-

Kumo

Kumo

Skeleton Line

安装

自定义宽度

自定义高度

块高度

卡片加载状态

API 参考