docs(agents): add design references
This commit is contained in:
@@ -0,0 +1,62 @@
|
||||
---
|
||||
name: arco-vue-skeleton
|
||||
description: "Arco Design Vue 骨架屏 Skeleton 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-skeleton>`、属性、事件、插槽、示例和实现细节。"
|
||||
user-invocable: false
|
||||
---
|
||||
|
||||
# 骨架屏 Skeleton
|
||||
|
||||
## 简介
|
||||
|
||||
骨架屏组件提供 `<a-skeleton-line>` 和 `<a-skeleton-shape>` 两种组件,用户可根据需要组合使用。
|
||||
|
||||
## 基本用法
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<a-skeleton>
|
||||
<a-space direction="vertical" :style="{width:'100%'}" size="large">
|
||||
<a-skeleton-line :rows="3" />
|
||||
<a-skeleton-shape />
|
||||
</a-space>
|
||||
</a-skeleton>
|
||||
</template>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### `<skeleton>` 属性
|
||||
|
||||
|参数名|描述|类型|默认值|
|
||||
|---|---|---|:---:|
|
||||
|loading|是否展示骨架屏(加载中状态)|`boolean`|`true`|
|
||||
|animation|是否开启骨架屏动画|`boolean`|`false`|
|
||||
|
||||
### `<skeleton-line>` 属性
|
||||
|
||||
|参数名|描述|类型|默认值|
|
||||
|---|---|---|:---:|
|
||||
|rows|展示的行数|`number`|`1`|
|
||||
|widths|线型骨架的宽度|`Array<number \| string>`|`[]`|
|
||||
|line-height|线型骨架的行高|`number`|`20`|
|
||||
|line-spacing|线型骨架的行间距|`number`|`15`|
|
||||
|
||||
### `<skeleton-shape>` 属性
|
||||
|
||||
|参数名|描述|类型|默认值|
|
||||
|---|---|---|:---:|
|
||||
|shape|图形骨架的形状|`'square' \| 'circle'`|`'square'`|
|
||||
|size|图形骨架的大小|`'small' \| 'medium' \| 'large'`|`'medium'`|
|
||||
|
||||
## 常用模式
|
||||
|
||||
- **图形骨架屏**:图形骨架屏分为 `square` - **正方形(默认)**、 `circle` - **圆形**两种形状,并提供 `small`、`medium`、`large` 三种尺寸。
|
||||
- **动画**:通过设置 `animation` 属性,让骨架屏显示动画效果。
|
||||
|
||||
## 最佳实践
|
||||
|
||||
- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
|
||||
- 模板属性使用 kebab-case,事件使用 `@event-name`,插槽使用 `#slot-name`。
|
||||
- 不要套用 React 专属 API,例如 JSX children、`Component.Sub` 或 `Form.useForm`。
|
||||
- 弹窗、抽屉、确认框等显隐状态使用 `v-model:visible` 或组件提供的方法统一管理。
|
||||
- 异步操作要配合 `loading`、禁用态或全局反馈,避免重复提交。
|
||||
Reference in New Issue
Block a user