1.5.1 • Published 1 year ago
@wines/skeleton
Skeleton 骨架屏
在需要等待加载内容的位置提供一个占位图形组合。
使用指南
在 page.json 中引入组件
{
"navigationBarTitleText": "Skeleton",
"usingComponents": {
"wux-skeleton": "@wines/skeleton",
"wux-skeleton-avatar": "@wines/skeleton/avatar",
"wux-skeleton-paragraph": "@wines/skeleton/paragraph",
"wux-row": "@wines/row",
"wux-col": "@wines/row/col"
}
}
示例
<view class="page">
<view class="page__hd">
<view class="page__title">Skeleton</view>
<view class="page__desc">骨架屏</view>
</view>
<view class="page__bd page__bd_spacing">
<view class="sub-title">Default</view>
<wux-skeleton>
<wux-skeleton-paragraph/>
</wux-skeleton>
<view class="sub-title">Rounded</view>
<wux-skeleton active>
<wux-skeleton-paragraph rounded />
</wux-skeleton>
<view class="sub-title">Rows = 4</view>
<wux-skeleton active>
<wux-skeleton-paragraph rows="4" />
</wux-skeleton>
<view class="sub-title">With avatar</view>
<wux-skeleton active>
<wux-row>
<wux-col span="2">
<wux-skeleton-avatar/>
</wux-col>
<wux-col span="10">
<wux-skeleton-paragraph/>
</wux-col>
</wux-row>
</wux-skeleton>
</view>
</view>
API
Skeleton props
参数 | 类型 | 描述 | 默认值 |
---|
prefixCls | string | 自定义类名前缀 | wux-skeleton |
active | boolean | 是否展示动画效果 | false |
Skeleton externalClasses
SkeletonAvatar props
参数 | 类型 | 描述 | 默认值 |
---|
prefixCls | string | 自定义类名前缀 | wux-skeleton-avatar |
shape | string | 指定头像的形状,可选值为 circle、rounded、square | circle |
size | string | 设置头像的大小,可选值为 small、default、large | default |
SkeletonAvatar externalClasses
SkeletonParagraph props
参数 | 类型 | 描述 | 默认值 |
---|
prefixCls | string | 自定义类名前缀 | wux-skeleton-paragraph |
rows | number | 设置段落占位图的行数 | 3 |
rounded | boolean | 是否圆角 | false |
SkeletonParagraph externalClasses