# 骨架屏 Skeleton

- 页面: https://jiguang132.com/zh/resources/arco-design/docs/skeleton
- 资源: Arco Design (https://jiguang132.com/zh/resources/arco-design.md)
- 全部指南: https://jiguang132.com/zh/resources/arco-design/docs.md

将加载中的数据用灰色占位。

## 安装

```bash
npm install @arco-design/web-react@2.66.18
```

在入口引入 `@arco-design/web-react/dist/css/arco.css`，用 `ConfigProvider` 设置语言。React 19 项目还需在入口最先引入 `@arco-design/web-react/es/_util/react-19-adapter`，否则 Message、Modal 等命令式 API 无法渲染。

## 示例

- **基础用法**：骨架屏的基本使用
- **文本行数和宽度**：设置文本行数及文本宽度。
- **动画**：骨架屏显示动画效果。

示例来自 Arco Design 官方仓库（MIT），固定在 npm 2.66.18 对应的提交；部分示例使用在线图片或上传地址，预览中网络请求被禁用。

## API

### Skeleton

|参数名|描述|类型|默认值|
|---|---|---|---|
|animation|是否显示动画效果|boolean |`-`|
|loading|是否显示子组件。为 `true` 时候显示占位符|boolean |`true`|
|className|节点类名|string \| string[] |`-`|
|image|是否显示图片占位|[SkeletonImageProps](#skeletonimageprops) \| boolean |`-`|
|style|节点样式|CSSProperties |`-`|
|text|是否显示文本占位|[SkeletonTextProps](#skeletontextprops) \| boolean |`true`|

### SkeletonImageProps

```js
export interface SkeletonImageProps {
  style?: CSSProperties;
  className?: string;
  /** 图片形状 */
  shape?: "circle" | "square";
  /** 图片尺寸 */
  size?: "small" | "default" | "large";
  /** 图片位置 */
  position?: "left" | "right";
  prefixCls?: string;
}
```

### SkeletonTextProps

```js
export interface SkeletonTextProps {
  style?: CSSProperties;
  className?: string;
  /** 文本行数 */
  rows?: number;
  /** 文本行宽度 */
  width?: number | string | (string | number)[];
  prefixCls?: string;
}
```

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt