ion-skeleton-text
Skeleton Text是一个用于呈现占位符内容的组件。元素将呈现指定宽度的灰色块。
使用
<！——在骨架屏幕后显示的数据——>
<
div
* ngIf
＝
＂
数据
＂
>
<
div
类
＝
＂
ion-padding
＂
>
我爱你，我爱你，我爱你。这是一颗不存在的星。在quam一个eros malesuada调味品。小心意外的车辆。
div
>
<
ion-list
>
<
ion-list-header
>
<
ion-label
>
数据
ion-label
>
ion-list-header
>
<
ion-item
>
<
ion-avatar
槽
＝
＂
开始
＂
>
<
img
src
＝
＂
。/ avatar.svg
＂
>
ion-avatar
>
<
ion-label
>
<
h3
>
{{数据。标题｝｝
h3
>
<
p
>
{{数据。虽然这些}}
p
>
<
p
>
{{数据。para2}}
p
>
ion-label
>
ion-item
>
<
ion-item
>
<
ion-thumbnail
槽
＝
＂
开始
＂
>
<
img
src
＝
＂
。/ thumbnail.svg
＂
>
ion-thumbnail
>
<
ion-label
>
<
h3
>
{{数据。标题｝｝
h3
>
<
p
>
{{数据。虽然这些}}
p
>
<
p
>
{{数据。para2}}
p
>
ion-label
>
ion-item
>
<
ion-item
>
<
ion-icon
的名字
＝
＂
调用
＂
槽
＝
＂
开始
＂
>
ion-icon
>
<
ion-label
>
<
h3
>
{{数据。标题｝｝
h3
>
<
p
>
{{数据。虽然这些}}
p
>
<
p
>
{{数据。para2}}
p
>
ion-label
>
ion-item
>
ion-list
>
div
>
<！—骨架屏幕—>
<
div
* ngIf
＝
＂
数据!
＂
>
<
div
类
＝
＂
ion-padding custom-skeleton
＂
>
<
ion-skeleton-text
动画
风格
= "
宽度
：
60％
＂
>
ion-skeleton-text
>
<
ion-skeleton-text
动画
>
ion-skeleton-text
>
<
ion-skeleton-text
动画
风格
= "
宽度
：
88％
＂
>
ion-skeleton-text
>
<
ion-skeleton-text
动画
风格
= "
宽度
：
70％
＂
>
ion-skeleton-text
>
<
ion-skeleton-text
动画
风格
= "
宽度
：
60％
＂
>
ion-skeleton-text
>
div
>
<
ion-list
>
<
ion-list-header
>
<
ion-label
>
<
ion-skeleton-text
动画
风格
= "
宽度
：
20％
＂
>
ion-skeleton-text
>
ion-label
>
ion-list-header
>
<
ion-item
>
<
ion-avatar
槽
＝
＂
开始
＂
>
<
ion-skeleton-text
动画
>
ion-skeleton-text
>
ion-avatar
>
<
ion-label
>
<
h3
>
<
ion-skeleton-text
动画
风格
= "
宽度
：
50％
＂
>
ion-skeleton-text
>
h3
>
<
p
>
<
ion-skeleton-text
动画
风格
= "
宽度
：
80％
＂
>
ion-skeleton-text
>
p
>
<
p
>
<
ion-skeleton-text
动画
风格
= "
宽度
：
60％
＂
>
ion-skeleton-text
>
p
>
ion-label
>
ion-item
>
<
ion-item
>
<
ion-thumbnail
槽
＝
＂
开始
＂
>
<
ion-skeleton-text
动画
>
ion-skeleton-text
>
ion-thumbnail
>
<
ion-label
>
<
h3
>
<
ion-skeleton-text
动画
风格
= "
宽度
：
50％
＂
>
ion-skeleton-text
>
h3
>
<
p
>
<
ion-skeleton-text
动画
风格
= "
宽度
：
80％
＂
>
ion-skeleton-text
>
p
>
<
p
>
<
ion-skeleton-text
动画
风格
= "
宽度
：
60％
＂
>
ion-skeleton-text
>
p
>
ion-label
>
ion-item
>
<
ion-item
>
<
ion-skeleton-text
动画
风格
= "
宽度
：
27个像素
；
高度
：
27个像素
＂
槽
＝
＂
开始
＂
>
ion-skeleton-text
>
<
ion-label
>
<
h3
>
<
ion-skeleton-text
动画
风格
= "
宽度
：
50％
＂
>
ion-skeleton-text
>
h3
>
<
p
>
<
ion-skeleton-text
动画
风格
= "
宽度
：
80％
＂
>
ion-skeleton-text
>
p
>
<
p
>
<
ion-skeleton-text
动画
风格
= "
宽度
：
60％
＂
>
ion-skeleton-text
>
p
>
ion-label
>
ion-item
>
ion-list
>
div
>
复制
复制
/*自定义骨架线高度和边距*/
.custom-skeleton ion-skeleton-text
｛
行高
：
13 px
；
｝
.custom-skeleton ion-skeleton-text:胎
｛
margin-bottom
：
5 px
；
｝
复制
复制
进口
｛
组件
｝
从
“@angular /核心”
；
＠
组件
（
｛
选择器
：
“skeleton-text-example”
，
templateUrl
：
“skeleton-text-example.html”
，
styleUrls
：
［
”。/ skeleton-text-example.css '
］
｝
）
出口
类
SkeletonTextExample
｛
数据
：
任何
；
构造函数
（
）
｛
｝
ionViewWillEnter
（
）
｛
setTimeout
（
（
）
＝＞
｛
这
．
数据
＝
｛
“标题”
：
“正常文本”
，
“虽然”
：
" Lorem ipsum dolor sit amet, consectetur "
，
“para2”
：
“adipiscing elit。”
｝
；
｝
，
5000
）
；
｝
｝
复制
复制
<！——在骨架屏幕后显示的数据——>
<
div
id
＝
＂
数据
＂
>
<
div
类
＝
＂
ion-padding
＂
>
我爱你，我爱你，我爱你。这是一颗不存在的星。在quam一个eros malesuada调味品。小心意外的车辆。
div
>
<
ion-list
>
<
ion-list-header
>
<
ion-label
>
数据
ion-label
>
ion-list-header
>
<
ion-item
>
<
ion-avatar
槽
＝
＂
开始
＂
>
<
img
src
＝
＂
。/ avatar.svg
＂
>
ion-avatar
>
<
ion-label
>
<
h3
>
正常的文本
h3
>
<
p
>
Lorem ipsum dolor sit amet, consectetur
p
>
<
p
>
adipiscing elit。
p
>
ion-label
>
ion-item
>
<
ion-item
>
<
ion-thumbnail
槽
＝
＂
开始
＂
>
<
img
src
＝
＂
。/ thumbnail.svg
＂
>
ion-thumbnail
>
<
ion-label
>
<
h3
>
正常的文本
h3
>
<
p
>
Lorem ipsum dolor sit amet, consectetur
p
>
<
p
>
adipiscing elit。
p
>
ion-label
>
ion-item
>
<
ion-item
>
<
ion-icon
的名字
＝
＂
调用
＂
槽
＝
＂
开始
＂
>
ion-icon
>
<
ion-label
>
<
h3
>
正常的文本
h3
>
<
p
>
Lorem ipsum dolor sit amet, consectetur
p
>
<
p
>
adipiscing elit。
p
>
ion-label
>
ion-item
>
ion-list
>
div
>
<！—骨架屏幕—>
<
div
id
＝
＂
骨架
＂
>
<
div
类
＝
＂
ion-padding custom-skeleton
＂
>
<
ion-skeleton-text
动画
风格
= "
宽度
：
60％
＂
>
ion-skeleton-text
>
<
ion-skeleton-text
动画
>
ion-skeleton-text
>
<
ion-skeleton-text
动画
风格
= "
宽度
：
88％
＂
>
ion-skeleton-text
>
<
ion-skeleton-text
动画
风格
= "
宽度
：
70％
＂
>
ion-skeleton-text
>
<
ion-skeleton-text
动画
风格
= "
宽度
：
60％
＂
>
ion-skeleton-text
>
div
>
<
ion-list
>
<
ion-list-header
>
<
ion-label
>
<
ion-skeleton-text
动画
风格
= "
宽度
：
20％
＂
>
ion-skeleton-text
>
ion-label
>
ion-list-header
>
<
ion-item
>
<
ion-avatar
槽
＝
＂
开始
＂
>
<
ion-skeleton-text
动画
>
ion-skeleton-text
>
ion-avatar
>
<
ion-label
>
<
h3
>
<
ion-skeleton-text
动画
风格
= "
宽度
：
50％
＂
>
ion-skeleton-text
>
h3
>
<
p
>
<
ion-skeleton-text
动画
风格
= "
宽度
：
80％
＂
>
ion-skeleton-text
>
p
>
<
p
>
<
ion-skeleton-text
动画
风格
= "
宽度
：
60％
＂
>
ion-skeleton-text
>
p
>
ion-label
>
ion-item
>
<
ion-item
>
<
ion-thumbnail
槽
＝
＂
开始
＂
>
<
ion-skeleton-text
动画
>
ion-skeleton-text
>
ion-thumbnail
>
<
ion-label
>
<
h3
>
<
ion-skeleton-text
动画
风格
= "
宽度
：
50％
＂
>
ion-skeleton-text
>
h3
>
<
p
>
<
ion-skeleton-text
动画
风格
= "
宽度
：
80％
＂
>
ion-skeleton-text
>
p
>
<
p
>
<
ion-skeleton-text
动画
风格
= "
宽度
：
60％
＂
>
ion-skeleton-text
>
p
>
ion-label
>
ion-item
>
<
ion-item
>
<
ion-skeleton-text
动画
风格
= "
宽度
：
27个像素
；
高度
：
27个像素
＂
槽
＝
＂
开始
＂
>
ion-skeleton-text
>
<
ion-label
>
<
h3
>
<
ion-skeleton-text
动画
风格
= "
宽度
：
50％
＂
>
ion-skeleton-text
>
h3
>
<
p
>
<
ion-skeleton-text
动画
风格
= "
宽度
：
80％
＂
>
ion-skeleton-text
>
p
>
<
p
>
<
ion-skeleton-text
动画
风格
= "
宽度
：
60％
＂
>
ion-skeleton-text
>
p
>
ion-label
>
ion-item
>
ion-list
>
div
>
复制
复制
#数据
｛
显示
：
没有一个
；
｝
/*自定义骨架线高度和边距*/
.custom-skeleton ion-skeleton-text
｛
行高
：
13 px
；
｝
.custom-skeleton ion-skeleton-text:胎
｛
margin-bottom
：
5 px
；
｝
复制
复制
函数
onLoad
（
）
｛
常量
skeletonEl
＝
文档
．
getElementById
（
“骨架”
）
；
常量
dataEl
＝
文档
．
getElementById
（
“数据”
）
；
setTimeout
（
（
）
＝＞
｛
skeletonEl
．
风格
．
显示
＝
“没有”
；
dataEl
．
风格
．
显示
＝
“块”
；
｝
，
5000
）
；
｝
复制
复制
进口
反应
，
｛
useState
｝
从
“反应”
；
进口
｛
IonContent
，
IonItem
，
IonAvatar
，
IonLabel
，
IonSkeletonText
，
IonListHeader
，
betway东盟体育appIonIcon
，
IonThumbnail
，
IonList
｝
从
“@betway东盟体育appionic /反应”
；
进口
｛
调用
｝
从
“betway东盟体育appionicons /图标”
；
进口
”。/ SkeletonTextExample.css '
；
出口
常量
SkeletonTextExample
：
反应
．
足球俱乐部
＝
（
）
＝＞
｛
常量
［
数据
，
setData
］
＝
useState
（
）
；
setTimeout
（
（
）
＝＞
｛
setData
（
｛
标题
：
“正常文本”
，
虽然这些
：
" Lorem ipsum dolor sit amet, consectetur "
，
para2
：
“adipiscing elit。”
｝
）
；
｝
，
5000
）
；
返回
（
<
IonContent
>
｛
数据
？
（
<
>
<
div
类名称
＝
＂
ion-padding
＂
>
我爱你，我爱你，我爱你。这是一颗不存在的星。在quam一个eros malesuada调味品。小心意外的车辆。
div
>
<
IonList
>
<
IonListHeader
>
<
IonLabel
>
数据
IonLabel
>
IonListHeader
>
<
IonItem
>
<
IonAvatar
槽
＝
＂
开始
＂
>
<
img
src
＝
＂
。/ avatar.svg
＂
/>
IonAvatar
>
<
IonLabel
>
<
h3
>
｛
数据
．
标题
｝
h3
>
<
p
>
｛
数据
．
虽然这些
｝
p
>
<
p
>
｛
数据
．
para2
｝
p
>
IonLabel
>
IonItem
>
<
IonItem
>
<
IonThumbnail
槽
＝
＂
开始
＂
>
<
img
src
＝
＂
。/ thumbnail.svg
＂
/>
IonThumbnail
>
<
IonLabel
>
<
h3
>
｛
数据
．
标题
｝
h3
>
<
p
>
｛
数据
．
虽然这些
｝
p
>
<
p
>
｛
数据
．
para2
｝
p
>
IonLabel
>
IonItem
>
<
IonItem
>
<
betway东盟体育appIonIcon
图标
＝
｛
调用
｝
槽
＝
＂
开始
＂
/>
<
IonLabel
>
<
h3
>
｛
数据
．
标题
｝
h3
>
<
p
>
｛
数据
．
虽然这些
｝
p
>
<
p
>
｛
数据
．
para2
｝
p
>
IonLabel
>
IonItem
>
IonList
>
>
）
：
（
<
>
<
div
类名称
＝
＂
ion-padding custom-skeleton
＂
>
<
IonSkeletonText
动画
风格
＝
｛
｛
宽度
：
“60%”
｝
｝
/>
<
IonSkeletonText
动画
/>
<
IonSkeletonText
动画
风格
＝
｛
｛
宽度
：
“88%”
｝
｝
/>
<
IonSkeletonText
动画
风格
＝
｛
｛
宽度
：
“70%”
｝
｝
/>
<
IonSkeletonText
动画
风格
＝
｛
｛
宽度
：
“60%”
｝
｝
/>
div
>
<
IonList
>
<
IonListHeader
>
<
IonLabel
>
<
IonSkeletonText
动画
风格
＝
｛
｛
宽度
：
“20%”
｝
｝
/>
IonLabel
>
IonListHeader
>
<
IonItem
>
<
IonAvatar
槽
＝
＂
开始
＂
>
<
IonSkeletonText
动画
/>
IonAvatar
>
<
IonLabel
>
<
h3
>
<
IonSkeletonText
动画
风格
＝
｛
｛
宽度
：
“50%”
｝
｝
/>
h3
>
<
p
>
<
IonSkeletonText
动画
风格
＝
｛
｛
宽度
：
“80%”
｝
｝
/>
p
>
<
p
>
<
IonSkeletonText
动画
风格
＝
｛
｛
宽度
：
“60%”
｝
｝
/>
p
>
IonLabel
>
IonItem
>
<
IonItem
>
<
IonThumbnail
槽
＝
＂
开始
＂
>
<
IonSkeletonText
动画
/>
IonThumbnail
>
<
IonLabel
>
<
h3
>
<
IonSkeletonText
动画
风格
＝
｛
｛
宽度
：
“50%”
｝
｝
/>
h3
>
<
p
>
<
IonSkeletonText
动画
风格
＝
｛
｛
宽度
：
“80%”
｝
｝
/>
p
>
<
p
>
<
IonSkeletonText
动画
风格
＝
｛
｛
宽度
：
“60%”
｝
｝
/>
p
>
IonLabel
>
IonItem
>
<
IonItem
>
<
IonSkeletonText
动画
风格
＝
｛
｛
宽度
：
“27 px”
，
高度
：
“27 px”
｝
｝
槽
＝
＂
开始
＂
/>
<
IonLabel
>
<
h3
>
<
IonSkeletonText
动画
风格
＝
｛
｛
宽度
：
“50%”
｝
｝
/>
h3
>
<
p
>
<
IonSkeletonText
动画
风格
＝
｛
｛
宽度
：
“80%”
｝
｝
/>
p
>
<
p
>
<
IonSkeletonText
动画
风格
＝
｛
｛
宽度
：
“60%”
｝
｝
/>
p
>
IonLabel
>
IonItem
>
IonList
>
>
）
｝
IonContent
>
）
；
｝
；
复制
复制
/*自定义骨架线高度和边距*/
.custom-skeleton ion-skeleton-text
｛
行高
：
13 px
；
｝
.custom-skeleton ion-skeleton-text:胎
｛
margin-bottom
：
5 px
；
｝
复制
复制
进口
｛
组件
，
状态
，
h
｝
从
“@stencil /核心”
；
＠
组件
（
｛
标签
：
“skeleton-text-example”
，
styleUrl
：
“skeleton-text-example.css”
｝
）
出口
类
SkeletonTextExample
｛
＠
状态
（
）
数据
：
任何
；
componentWillLoad
（
）
｛
//数据将在5秒后显示
setTimeout
（
（
）
＝＞
｛
这
．
数据
＝
｛
“标题”
：
“正常文本”
，
“虽然”
：
" Lorem ipsum dolor sit amet, consectetur "
，
“para2”
：
“adipiscing elit。”
｝
；
｝
，
5000
）
；
｝
//当没有数据时渲染骨架屏幕
renderSkeletonScreen
（
）
｛
返回
［
<
离子含量
>
<
div
类
＝
＂
ion-padding custom-skeleton
＂
>
<
ion-skeleton-text
动画
风格
＝
｛
｛
“宽度”
：
“60%”
｝
｝
>
ion-skeleton-text
>
<
ion-skeleton-text
动画
>
ion-skeleton-text
>
<
ion-skeleton-text
动画
风格
＝
｛
｛
“宽度”
：
“88%”
｝
｝
>
ion-skeleton-text
>
<
ion-skeleton-text
动画
风格
＝
｛
｛
“宽度”
：
“70%”
｝
｝
>
ion-skeleton-text
>
<
ion-skeleton-text
动画
风格
＝
｛
｛
“宽度”
：
“60%”
｝
｝
>
ion-skeleton-text
>
div
>
<
ion-list
>
<
ion-list-header
>
<
ion-label
>
<
ion-skeleton-text
动画
风格
＝
｛
｛
“宽度”
：
“20%”
｝
｝
>
ion-skeleton-text
>
ion-label
>
ion-list-header
>
<
ion-item
>
<
ion-avatar
槽
＝
＂
开始
＂
>
<
ion-skeleton-text
动画
>
ion-skeleton-text
>
ion-avatar
>
<
ion-label
>
<
h3
>
<
ion-skeleton-text
动画
风格
＝
｛
｛
“宽度”
：
“50%”
｝
｝
>
ion-skeleton-text
>
h3
>
<
p
>
<
ion-skeleton-text
动画
风格
＝
｛
｛
“宽度”
：
“80%”
｝
｝
>
ion-skeleton-text
>
p
>
<
p
>
<
ion-skeleton-text
动画
风格
＝
｛
｛
“宽度”
：
“60%”
｝
｝
>
ion-skeleton-text
>
p
>
ion-label
>
ion-item
>
<
ion-item
>
<
ion-thumbnail
槽
＝
＂
开始
＂
>
<
ion-skeleton-text
动画
>
ion-skeleton-text
>
ion-thumbnail
>
<
ion-label
>
<
h3
>
<
ion-skeleton-text
动画
风格
＝
｛
｛
“宽度”
：
“50%”
｝
｝
>
ion-skeleton-text
>
h3
>
<
p
>
<
ion-skeleton-text
动画
风格
＝
｛
｛
“宽度”
：
“80%”
｝
｝
>
ion-skeleton-text
>
p
>
<
p
>
<
ion-skeleton-text
动画
风格
＝
｛
｛
“宽度”
：
“60%”
｝
｝
>
ion-skeleton-text
>
p
>
ion-label
>
ion-item
>
<
ion-item
>
<
ion-skeleton-text
动画
风格
＝
｛
｛
“宽度”
：
“27 p”
，
“高度”
：
“27 px”
｝
｝
槽
＝
＂
开始
＂
>
ion-skeleton-text
>
<
ion-label
>
<
h3
>
<
ion-skeleton-text
动画
风格
＝
｛
｛
“宽度”
：
“50%”
｝
｝
>
ion-skeleton-text
>
h3
>
<
p
>
<
ion-skeleton-text
动画
风格
＝
｛
｛
“宽度”
：
“80%”
｝
｝
>
ion-skeleton-text
>
p
>
<
p
>
<
ion-skeleton-text
动画
风格
＝
｛
｛
“宽度”
：
“60%”
｝
｝
>
ion-skeleton-text
>
p
>
ion-label
>
ion-item
>
ion-list
>
离子含量
>
］
；
｝
//使用data渲染元素
renderDataScreen
（
）
｛
返回
［
<
离子含量
>
<
div
类
＝
＂
ion-padding
＂
>
我爱你，我爱你，我爱你。这是一颗不存在的星。在quam一个eros malesuada调味品。小心意外的车辆。
div
>
<
ion-list
>
<
ion-list-header
>
<
ion-label
>
数据
ion-label
>
ion-list-header
>
<
ion-item
>
<
ion-avatar
槽
＝
＂
开始
＂
>
<
img
src
＝
＂
。/ avatar.svg
＂
/>
ion-avatar
>
<
ion-label
>
<
h3
>
｛
这
．
数据
．
标题
｝
h3
>
<
p
>
｛
这
．
数据
．
虽然这些
｝
p
>
<
p
>
｛
这
．
数据
．
para2
｝
p
>
ion-label
>
ion-item
>
<
ion-item
>
<
ion-thumbnail
槽
＝
＂
开始
＂
>
<
img
src
＝
＂
。/ thumbnail.svg
＂
/>
ion-thumbnail
>
<
ion-label
>
<
h3
>
｛
这
．
数据
．
标题
｝
h3
>
<
p
>
｛
这
．
数据
．
虽然这些
｝
p
>
<
p
>
｛
这
．
数据
．
para2
｝
p
>
ion-label
>
ion-item
>
<
ion-item
>
<
ion-icon
的名字
＝
＂
调用
＂
槽
＝
＂
开始
＂
>
ion-icon
>
<
ion-label
>
<
h3
>
｛
这
．
数据
．
标题
｝
h3
>
<
p
>
｛
这
．
数据
．
虽然这些
｝
p
>
<
p
>
｛
这
．
数据
．
para2
｝
p
>
ion-label
>
ion-item
>
ion-list
>
离子含量
>
］
；
｝
渲染
（
）
｛
如果
（
这
．
数据
）
｛
返回
这
．
renderDataScreen
（
）
；
｝
其他的
｛
返回
这
．
renderSkeletonScreen
（
）
；
｝
｝
｝
复制
复制
/*自定义骨架线高度和边距*/
.custom-skeleton ion-skeleton-text
｛
行高
：
13 px
；
｝
.custom-skeleton ion-skeleton-text:胎
｛
margin-bottom
：
5 px
；
｝
复制
复制
<
模板
>
<！——在骨架屏幕后显示的数据——>
<
div
v
＝
＂
数据
＂
>
<
div
类
＝
＂
ion-padding
＂
>
我爱你，我爱你，我爱你。这是一颗不存在的星。在quam一个eros malesuada调味品。小心意外的车辆。
div
>
<
ion-list
>
<
ion-list-header
>
<
ion-label
>
数据
ion-label
>
ion-list-header
>
<
ion-item
>
<
ion-avatar
槽
＝
＂
开始
＂
>
<
img
src
＝
＂
。/ avatar.svg
＂
>
ion-avatar
>
<
ion-label
>
<
h3
>
{{数据。标题｝｝
h3
>
<
p
>
{{数据。虽然这些}}
p
>
<
p
>
{{数据。para2}}
p
>
ion-label
>
ion-item
>
<
ion-item
>
<
ion-thumbnail
槽
＝
＂
开始
＂
>
<
img
src
＝
＂
。/ thumbnail.svg
＂
>
ion-thumbnail
>
<
ion-label
>
<
h3
>
{{数据。标题｝｝
h3
>
<
p
>
{{数据。虽然这些}}
p
>
<
p
>
{{数据。para2}}
p
>
ion-label
>
ion-item
>
<
ion-item
>
<
ion-icon
:图标
＝
＂
调用
＂
槽
＝
＂
开始
＂
>
ion-icon
>
<
ion-label
>
<
h3
>
{{数据。标题｝｝
h3
>
<
p
>
{{数据。虽然这些}}
p
>
<
p
>
{{数据。para2}}
p
>
ion-label
>
ion-item
>
ion-list
>
div
>
<！—骨架屏幕—>
<
div
v
＝
＂
数据!
＂
>
<
div
类
＝
＂
ion-padding custom-skeleton
＂
>
<
ion-skeleton-text
动画
风格
= "
宽度
：
60％
＂
>
ion-skeleton-text
>
<
ion-skeleton-text
动画
>
ion-skeleton-text
>
<
ion-skeleton-text
动画
风格
= "
宽度
：
88％
＂
>
ion-skeleton-text
>
<
ion-skeleton-text
动画
风格
= "
宽度
：
70％
＂
>
ion-skeleton-text
>
<
ion-skeleton-text
动画
风格
= "
宽度
：
60％
＂
>
ion-skeleton-text
>
div
>
<
ion-list
>
<
ion-list-header
>
<
ion-label
>
<
ion-skeleton-text
动画
风格
= "
宽度
：
20％
＂
>
ion-skeleton-text
>
ion-label
>
ion-list-header
>
<
ion-item
>
<
ion-avatar
槽
＝
＂
开始
＂
>
<
ion-skeleton-text
动画
>
ion-skeleton-text
>
ion-avatar
>
<
ion-label
>
<
h3
>
<
ion-skeleton-text
动画
风格
= "
宽度
：
50％
＂
>
ion-skeleton-text
>
h3
>
<
p
>
<
ion-skeleton-text
动画
风格
= "
宽度
：
80％
＂
>
ion-skeleton-text
>
p
>
<
p
>
<
ion-skeleton-text
动画
风格
= "
宽度
：
60％
＂
>
ion-skeleton-text
>
p
>
ion-label
>
ion-item
>
<
ion-item
>
<
ion-thumbnail
槽
＝
＂
开始
＂
>
<
ion-skeleton-text
动画
>
ion-skeleton-text
>
ion-thumbnail
>
<
ion-label
>
<
h3
>
<
ion-skeleton-text
动画
风格
= "
宽度
：
50％
＂
>
ion-skeleton-text
>
h3
>
<
p
>
<
ion-skeleton-text
动画
风格
= "
宽度
：
80％
＂
>
ion-skeleton-text
>
p
>
<
p
>
<
ion-skeleton-text
动画
风格
= "
宽度
：
60％
＂
>
ion-skeleton-text
>
p
>
ion-label
>
ion-item
>
<
ion-item
>
<
ion-skeleton-text
动画
风格
= "
宽度
：
27个像素
；
高度
：
27个像素
＂
槽
＝
＂
开始
＂
>
ion-skeleton-text
>
<
ion-label
>
<
h3
>
<
ion-skeleton-text
动画
风格
= "
宽度
：
50％
＂
>
ion-skeleton-text
>
h3
>
<
p
>
<
ion-skeleton-text
动画
风格
= "
宽度
：
80％
＂
>
ion-skeleton-text
>
p
>
<
p
>
<
ion-skeleton-text
动画
风格
= "
宽度
：
60％
＂
>
ion-skeleton-text
>
p
>
ion-label
>
ion-item
>
ion-list
>
div
>
模板
>
<
风格
>
/*自定义骨架线高度和边距*/
.custom-skeleton ion-skeleton-text
｛
行高
：
13 px
；
｝
.custom-skeleton ion-skeleton-text:胎
｛
margin-bottom
：
5 px
；
｝
风格
>
<
脚本
>
进口
｛
IonAvatar
，
betway东盟体育appIonIcon
，
IonItem
，
IonLabel
，
IonList
，
IonListHeader
，
IonSkeletonText
，
IonThumbnail
｝
从
“@betway东盟体育appionic / vue”
；
进口
｛
调用
｝
从
“betway东盟体育appionicons /图标”
；
进口
｛
defineComponent
，
裁判
｝
从
“vue”
；
出口
默认的
defineComponent
（
｛
组件
：
｛
IonAvatar
，
betway东盟体育appIonIcon
，
IonItem
，
IonLabel
，
IonList
，
IonListHeader
，
IonSkeletonText
，
IonThumbnail
｝
，
设置
（
）
｛
常量
数据
＝
裁判
（
）
；
setTimeout
（
（
）
＝＞
｛
数据
．
价值
＝
｛
“标题”
：
“正常文本”
，
“虽然”
：
" Lorem ipsum dolor sit amet, consectetur "
，
“para2”
：
“adipiscing elit。”
｝
；
｝
，
5000
）
；
返回
｛
数据
｝
｝
｝
）
；
脚本
>
复制
复制
属性
动画 |
|
|---|---|
| 描述 |
如果 |
| 属性 |
动画 |
| 类型 |
布尔 |
| 默认的 |
假 |
CSS自定义属性
| 的名字 | 描述 |
|---|---|
——背景 |
背景的框架文本 |
——background-rgb |
背景的框架文本在rgb格式 |
——这个特性 |
框架文本的边框半径 |