diff --git a/packages/opendesign/src/skeleton/__docs__/__case__/SkeletonAvatar.vue b/packages/opendesign/src/skeleton/__docs__/__case__/SkeletonAvatar.vue new file mode 100644 index 0000000000000000000000000000000000000000..0e993b51ca840896b826f5ac54990f111bfa3e33 --- /dev/null +++ b/packages/opendesign/src/skeleton/__docs__/__case__/SkeletonAvatar.vue @@ -0,0 +1,36 @@ + + + +### 带头像的骨架屏 + + + +### A skeleton screen with a leading figure. + + + + diff --git a/packages/opendesign/src/skeleton/__docs__/__case__/SkeletonLoading.vue b/packages/opendesign/src/skeleton/__docs__/__case__/SkeletonLoading.vue new file mode 100644 index 0000000000000000000000000000000000000000..da1f513a6c45c7f5403e714bcc38e34fe5fda3af --- /dev/null +++ b/packages/opendesign/src/skeleton/__docs__/__case__/SkeletonLoading.vue @@ -0,0 +1,72 @@ + + + +### 骨架屏显示与隐藏 + + + +### Display and hide of the skeleton screen. + + + + diff --git a/packages/opendesign/src/skeleton/__docs__/__case__/SkeletonUsage.vue b/packages/opendesign/src/skeleton/__docs__/__case__/SkeletonUsage.vue new file mode 100644 index 0000000000000000000000000000000000000000..ad9bd276c51696ee7213ec0e07df98867a66eade --- /dev/null +++ b/packages/opendesign/src/skeleton/__docs__/__case__/SkeletonUsage.vue @@ -0,0 +1,45 @@ + + + +### 使用 + +1. 骨架屏的显示与隐藏通过 `loading` 属性控制; +2. 骨架屏的动画效果通过 `animation` 属性控制; +3. 骨架屏的显示文本行数通过 `rows` 属性控制。 + + + +1. The display and hiding of the skeleton screen are controlled by the `loading` attribute. + +2. The animation effect of the skeleton screen is controlled through the `animation` property. + +3. The number of text lines displayed on the skeleton screen is controlled by the `rows` attribute. + +### Usage + + diff --git a/packages/opendesign/src/skeleton/__docs__/index.en-US.md b/packages/opendesign/src/skeleton/__docs__/index.en-US.md new file mode 100644 index 0000000000000000000000000000000000000000..d45693accb23529b4bdbfde3a61a4650783a9628 --- /dev/null +++ b/packages/opendesign/src/skeleton/__docs__/index.en-US.md @@ -0,0 +1,18 @@ +--- +sidebar: OSkeleton +kind: display +--- + +# Skeleton + +## Demo + + + + + +## Api + + + + diff --git a/packages/opendesign/src/skeleton/__docs__/index.zh-CN.md b/packages/opendesign/src/skeleton/__docs__/index.zh-CN.md new file mode 100644 index 0000000000000000000000000000000000000000..71f2abd76bd7c4044f0fb205450245f03dfa6fb1 --- /dev/null +++ b/packages/opendesign/src/skeleton/__docs__/index.zh-CN.md @@ -0,0 +1,18 @@ +--- +sidebar: OSkeleton 骨架屏 +kind: display +--- + +# 骨架屏 + +## 示例 + + + + + +## Api + + + + diff --git a/packages/opendesign/src/skeleton/types.ts b/packages/opendesign/src/skeleton/types.ts index 07c88e58f1160a814707bcd9abf8b9989330fe0f..7c574daa994e466c4473f71ad4b7c6b929ae4ba4 100644 --- a/packages/opendesign/src/skeleton/types.ts +++ b/packages/opendesign/src/skeleton/types.ts @@ -3,7 +3,9 @@ import { RoundT } from '../_utils/types'; export const skeletonTextProps = { /** - * 行数 + * @zh-CN 文本行数 + * @en-US Number of lines of text. + * @default 3 */ rows: { type: Number, @@ -18,14 +20,18 @@ export type SkeletonAvatarSizeT = (typeof SkeletonAvatarSizeTypes)[number]; export const skeletonAvatarProps = { /** - * 头像尺寸 + * @zh-CN 头像尺寸 + * @en-US Avatar size. + * @default 'medium' */ size: { type: String as PropType, default: 'medium', }, /** - * 圆角值 RoundT + * @zh-CN 圆角值 + * @en-US Round. + * @default 'pill' */ round: { type: String as PropType, @@ -41,21 +47,27 @@ export type SkeletonFigurePropsT = ExtractPropTypes; export const skeletonProps = { /** - * 是否显示加载中状态(即展示骨架屏) + * @zh-CN 是否显示加载中状态(即展示骨架屏) + * @en-US Whether to display the loading status (i.e., show the skeleton screen). + * @default true */ loading: { type: Boolean, default: true, }, /** - * 是否展示动画 + * @zh-CN 是否展示动画 + * @en-US Whether to display the animation. + * @default false */ animation: { type: Boolean, default: false, }, /** - * 行数 + * @zh-CN 文本行数 + * @en-US Number of lines of textd. + * @default 3 */ rows: { type: Number,