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格式 |
——这个特性 |
框架文本的边框半径 |