搜索文档 /
影子

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格式
——这个特性 框架文本的边框半径
查看源代码
Baidu