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>
  );
}

草图变体

设置 variant=“sketch” 以获得线框风格的占位符：圆角填充带有相同的滑动微光、 1px 轮廓，以及更浅的构造线条，每条线条会超出每个角 4px。请在线条周围留出 4px 的空间，以免具有 overflow: hidden 的父元素裁剪这些线条。当用户偏好减少动态效果时，微光会停止。

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

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

通过 className 为其指定高度和固定宽度，以便在文本行旁替代按钮、图标和徽章。

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

export function SkeletonLineSketchCardDemo() {
  return (
    <div className="w-64 rounded-lg p-4 ring ring-kumo-hairline">
      <div className="mb-4">
        <SkeletonLine
          variant="sketch"
          blockHeight={16}
          minWidth={40}
          maxWidth={60}
        />
      </div>
      <div className="flex flex-col gap-3">
        <SkeletonLine variant="sketch" />
        <SkeletonLine variant="sketch" />
        <SkeletonLine variant="sketch" minWidth={50} maxWidth={70} />
      </div>
      <div className="mt-6 flex gap-2">
        <SkeletonLine
          variant="sketch"
          minWidth={100}
          maxWidth={100}
          className="h-9 w-24"
        />
        <SkeletonLine
          variant="sketch"
          minWidth={100}
          maxWidth={100}
          className="h-9 w-24"
        />
      </div>
    </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 参考

属性	类型	默认值
variant	”default” \| “sketch"	"default”
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