Skeleton 骨架屏

在数据加载前展示占位图形，减少用户等待焦虑。

基础用法

import { Skeleton } from '@airo-ui/react'

function Demo() {
  return (
    <>
      <Skeleton width="200px" height="16px" />
      <Skeleton width="100%" height="200px" />
    </>
  )
}

圆角

import { Skeleton } from '@airo-ui/react'

function Demo() {
  return (
    <>
      <Skeleton width="48px" height="48px" rounded />
      <Skeleton width="200px" height="16px" rounded />
    </>
  )
}

动画

import { Skeleton } from '@airo-ui/react'

function Demo() {
  return (
    <>
      <Skeleton width="200px" height="16px" animated />
      <Skeleton width="100%" height="100px" animated rounded />
    </>
  )
}

包裹内容

当 children 存在时，骨架屏作为加载态的包裹层，内容加载完成后自动显示。

import { useState, useEffect } from 'react'
import { Skeleton } from '@airo-ui/react'

function Demo() {
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    const timer = setTimeout(() => setLoading(false), 2000)
    return () => clearTimeout(timer)
  }, [])

  if (loading) {
    return <Skeleton width="300px" height="60px" animated rounded />
  }

  return (
    <Skeleton>
      <div style={{ padding: 16 }}>
        <h3>内容已加载</h3>
        <p>这是实际的内容区域</p>
      </div>
    </Skeleton>
  )
}

API

Props

名称	类型	默认值	说明
width	string | number	—	宽度
height	string | number	—	高度
rounded	boolean	false	是否圆角
animated	boolean	true	是否显示动画
children	ReactNode	—	子内容（加载完成后显示）