cnd-components-mcp/componentData/components/骨架屏 Skeleton.md

An MCP service for Cnd components query | 一个减少 Cnd 组件代码生成幻觉的 MCP 服务，包含系统提示词、组件文档、API 文档、代码示例和更新日志查询

## 示例

```tsx
import React from 'react';
import { Skeleton, Card, Icon } from '@alicloud/console-components';

const commonProps = {
  extra: <Icon type="more" size="small" />,
  showHeadDivider: false,
  title: '卡片',
  style: { width: '510px' },
};
export default () => {
  return (
    <div>
      <Card
        {...commonProps}
        title="标题Title"
        showHeadDivider={false}
        contentHeight="auto"
      >
        <div>
          <Skeleton height={180} />
          <Skeleton />
          <Skeleton count={2} />
        </div>
      </Card>
    </div>
  );
};

export const meta = {
  title: '图片内容骨架屏',
  describe: '通过设置count属性设置骨架屏的行数',
};

```

## API

| 参数          | 说明                                                                | 类型             | 默认值 | 是否必填 |
| ------------- | ------------------------------------------------------------------- | ---------------- | ------ | -------- |
| count      | 要渲染的骨架行数。如果 count 是一个像 3.5 这样的小数，将会渲染三个完整的骨架和一个半宽度的骨架。	                                                      | number  | 1     |          |
| wrapper         | 包裹单个骨架元素的自定义组件。 | React.FunctionComponent | -      |          |
| circle       | 通过将边框半径设置为 50% 来使骨架呈圆形。	                                                      | boolean  | false      |          |
| className | 用于单个骨架元素的自定义类名                                                    | string | -     |          |
| containerClassName           | 用于包裹单个骨架元素的 <span> 的自定义类名。	                                       | string          | -  |          |