Skeleton 骨架屏

用于内容的动画加载占位符。

导入

import { Skeleton } from 'asterui'

示例

基础

具有不同尺寸的简单骨架形状。

</>

import { Skeleton, Space } from 'asterui'

function App() {
  return (
      <Space>
        <Skeleton className="h-32 w-full" />
        <Skeleton className="h-4 w-28" />
        <Skeleton className="h-4 w-full" />
        <Skeleton className="h-4 w-full" />
      </Space>
    )
}

export default App

圆形

用于头像的圆形骨架。

</>

import { Skeleton } from 'asterui'

function App() {
  return (
      <div className="flex gap-4">
        <Skeleton circle className="h-12 w-12" />
        <Skeleton circle className="h-16 w-16" />
        <Skeleton circle className="h-20 w-20" />
      </div>
    )
}

export default App

文本变体

为文本颜色而不是背景制作动画的骨架。

</>

Loading heading...

Loading paragraph text that will be replaced with actual content...

import { Skeleton, Space } from 'asterui'

function App() {
  return (
      <Space size="xs">
        <Skeleton variant="text" className="text-2xl">
          Loading heading...
        </Skeleton>
        <Skeleton variant="text">
          Loading paragraph text that will be replaced with actual content...
        </Skeleton>
      </Space>
    )
}

export default App

宽度和高度属性

使用宽度和高度属性进行精确调整大小。

</>

import { Skeleton } from 'asterui'

function App() {
  return (
      <div className="flex gap-4">
        <Skeleton width={100} height={100} />
        <Skeleton width="200px" height="100px" />
        <Skeleton width="50%" height={100} />
      </div>
    )
}

export default App

带文本的头像

用户配置文件的常见模式。

</>

import { Skeleton, Space } from 'asterui'

function App() {
  return (
      <div className="flex gap-4">
        <Skeleton circle className="h-12 w-12 shrink-0" />
        <Space size="xs" className="flex-1">
          <Skeleton className="h-4 w-20" />
          <Skeleton className="h-4 w-full" />
        </Space>
      </div>
    )
}

export default App

卡片骨架

卡片内容的加载占位符。

</>

import { Skeleton } from 'asterui'

function App() {
  return (
      <div className="card bg-base-100 border border-base-300">
        <div className="card-body">
          <Skeleton className="h-48 w-full mb-4" />
          <Skeleton className="h-6 w-3/4 mb-2" />
          <Skeleton className="h-4 w-full mb-2" />
          <Skeleton className="h-4 w-full mb-2" />
          <Skeleton className="h-4 w-2/3" />
        </div>
      </div>
    )
}

export default App

列表骨架

列表项的加载占位符。

</>

import { Skeleton, Space } from 'asterui'

function App() {
  return (
      <Space>
        {[1, 2, 3].map((i) => (
          <div key={i} className="flex gap-4">
            <Skeleton circle className="h-12 w-12 shrink-0" />
            <Space size="xs" className="flex-1">
              <Skeleton className="h-4 w-1/4" />
              <Skeleton className="h-4 w-full" />
            </Space>
          </div>
        ))}
      </Space>
    )
}

export default App

复杂布局

更复杂内容布局的骨架。

</>

import { Skeleton } from 'asterui'

function App() {
  return (
      <div className="space-y-6">
        <div className="flex gap-4">
          <Skeleton circle className="h-16 w-16 shrink-0" />
          <div className="flex-1 space-y-2">
            <Skeleton className="h-6 w-1/3" />
            <Skeleton className="h-4 w-full" />
            <Skeleton className="h-4 w-5/6" />
          </div>
        </div>
        <div className="grid grid-cols-3 gap-4">
          <Skeleton className="h-32" />
          <Skeleton className="h-32" />
          <Skeleton className="h-32" />
        </div>
      </div>
    )
}

export default App

API

Skeleton

属性	描述	类型	默认值
width	以像素或 CSS 字符串表示的宽度	string | number	-
height	以像素或 CSS 字符串表示的高度	string | number	-
circle	使骨架为圆形	boolean	false
variant	骨架变体	'default' | 'text'	'default'
className	额外的 CSS 类	string	-
children	内容(用于文本变体)	React.ReactNode	-

可访问性

• 骨架默认对屏幕阅读器隐藏
• 与加载状态一起使用以通知用户内容正在加载
• 将骨架形状与实际内容布局匹配
• 与 ARIA live 区域结合以进行加载公告