离子项目内部的离子4离子骨架未填充项目空间

Question

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

我注意到骨架文本容器（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

  

离子中美丽的完美骨架屏幕

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;
}
}

Answer 2

我自己弄清楚了，这个主意是在回答问题时触发的。

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

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