离子项目内的离子 4 离子骨架未填充项目 space

Question

我正在尝试在 ion-item 中使用 ion-skeleton。不是让骨架文本填充整个离子项目 space，而是将其压缩为几个像素 space。

我注意到框架文本容器 (ion-text) 在没有任何文本的情况下不会拉伸。

我也尝试了以下但没有成功： - 使用 div 而不是离子文本 - 删除 h1 和 p - 使用 Flex Properties 作为 .ion-align-items-stretch 和 .ion-align-items-stretch

的任意组合

这是我的项目的结构：

<ion-item class="ion-no-padding" lines="full" detail="true" *ngFor="let num of [0,1,2,3,4,5]">
  <ion-thumbnail slot="start">
    <ion-skeleton-text animated="true"></ion-skeleton-text>
  </ion-thumbnail>
  <ion-text>
    <h1><ion-skeleton-text animated="true"></ion-skeleton-text></h1>
    <p><ion-skeleton-text animated="true"></ion-skeleton-text></p>
    <p><ion-skeleton-text animated="true"></ion-skeleton-text></p>
    <p><ion-skeleton-text animated="true"></ion-skeleton-text></p>
  </ion-text>
</ion-item>

这是我得到的：

提前致谢，亲切的问候。

Answer 1

我自己想出来的，在回答一个答案时触发了这个想法。

就这么简单：只需将以下内容添加到页面的 scss sheet 中：

ion-text {
  min-width: 100%;
}

Answer 2

Beautiful perfect skeleton screen in Ionic

HTML代码

<ion-list lines="none" *ngFor="let x of [1,2,3]">
    <ion-item>
      <ion-skeleton-text width="40%" class="animate-skeleton-background"></ion-skeleton-text>
    </ion-item>
    <ion-item>
      <ion-skeleton-text width="60%" class="animate-skeleton-background"></ion-skeleton-text>
    </ion-item>
    <ion-item>
      <ion-skeleton-text width="100%" class="animate-skeleton-background"></ion-skeleton-text>
    </ion-item>
  </ion-list>

CSS代码

.animate-skeleton-background {
 height:20px;
 -webkit-animation: infinite bgcolorchange 2s;
 animation: 2s infinite bgcolorchange;
 opacity: 0.5;
}

@keyframes bgcolorchange {
0% {
color: #f2f2f2;
}
25% {
background: lightgray;
}
50% {
background: #f2f2f2;
}
75% {
background: lightgray;
}
100% {
background-color: #f2f2f2;
}
}

@-webkit-keyframes bgcolorchange {
0% {
background: #f2f2f2;
}
25% {
background: lightgray;
}
50% {
background: #f2f2f2;
}
75% {
background: lightgray;
}
100% {
background: #f2f2f2;
}
}

离子项目内的离子 4 离子骨架未填充项目 space

Ionic 4 ion-skeleton inside ion-item is not filling the item space

css

ionic-framework

ionic4