ion-skeleton-text
Ionic4项目中我们可以使用Ionic4进度指示组件ion-skeleton-text对项目进行布局。 ion-skeleton-text官方文档地址:https://ionicframework.com/docs/api/skeleton-textSkeleton Text is a component for rendering placeholder content. The element will render a gray block at the specified width.
ion-skeleton-text 用法(Usage)
<div *ngIf="data">
<div class="ion-padding">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac eros est. Cras iaculis pulvinar arcu non vehicula. Fusce at quam a eros malesuada condimentum. Aliquam tincidunt tincidunt vehicula.
div>
<ion-list>
<ion-list-header>Dataion-list-header>
<ion-item>
<ion-avatar slot="start">
<img src="./avatar.svg">
ion-avatar>
<ion-label>
<h3>
{{ data.heading }}
h3>
<p>
{{ data.para1 }}
p>
<p>
{{ data.para2 }}
p>
ion-label>
ion-item>
<ion-item>
<ion-thumbnail slot="start">
<img src="./thumbnail.svg">
ion-thumbnail>
<ion-label>
<h3>
{{ data.heading }}
h3>
<p>
{{ data.para1 }}
p>
<p>
{{ data.para2 }}
p>
ion-label>
ion-item>
<ion-item>
<ion-icon name="call" slot="start">ion-icon>
<ion-label>
<h3>
{{ data.heading }}
h3>
<p>
{{ data.para1 }}
p>
<p>
{{ data.para2 }}
p>
ion-label>
ion-item>
ion-list>
div>
<div *ngIf="!data">
<div class="ion-padding custom-skeleton">
<ion-skeleton-text animated style="width: 60%">ion-skeleton-text>
<ion-skeleton-text animated>ion-skeleton-text>
<ion-skeleton-text animated style="width: 88%">ion-skeleton-text>
<ion-skeleton-text animated style="width: 70%">ion-skeleton-text>
<ion-skeleton-text animated style="width: 60%">ion-skeleton-text>
div>
<ion-list>
<ion-list-header>
<ion-skeleton-text animated style="width: 20%">ion-skeleton-text>
ion-list-header>
<ion-item>
<ion-avatar slot="start">
<ion-skeleton-text animated>ion-skeleton-text>
ion-avatar>
<ion-label>
<h3>
<ion-skeleton-text animated style="width: 50%">ion-skeleton-text>
h3>
<p>
<ion-skeleton-text animated style="width: 80%">ion-skeleton-text>
p>
<p>
<ion-skeleton-text animated style="width: 60%">ion-skeleton-text>
p>
ion-label>
ion-item>
<ion-item>
<ion-thumbnail slot="start">
<ion-skeleton-text animated>ion-skeleton-text>
ion-thumbnail>
<ion-label>
<h3>
<ion-skeleton-text animated style="width: 50%">ion-skeleton-text>
h3>
<p>
<ion-skeleton-text animated style="width: 80%">ion-skeleton-text>
p>
<p>
<ion-skeleton-text animated style="width: 60%">ion-skeleton-text>
p>
ion-label>
ion-item>
<ion-item>
<ion-skeleton-text animated style="width: 27px; height: 27px" slot="start">ion-skeleton-text>
<ion-label>
<h3>
<ion-skeleton-text animated style="width: 50%">ion-skeleton-text>
h3>
<p>
<ion-skeleton-text animated style="width: 80%">ion-skeleton-text>
p>
<p>
<ion-skeleton-text animated style="width: 60%">ion-skeleton-text>
p>
ion-label>
ion-item>
ion-list>
div>
/* Custom Skeleton Line Height and Margin */
.custom-skeleton ion-skeleton-text {
line-height: 13px;
}
.custom-skeleton ion-skeleton-text:last-child {
margin-bottom: 5px;
}
import { Component } from '@angular/core';
@Component({
selector: 'skeleton-text-example',
templateUrl: 'skeleton-text-example.html',
styleUrls: ['./skeleton-text-example.css']
})
export class SkeletonTextExample {
data: any;
constructor() {}
ionViewWillEnter() {
setTimeout(() => {
this.data = {
'heading': 'Normal text',
'para1': 'Lorem ipsum dolor sit amet, consectetur',
'para2': 'adipiscing elit.'
};
}, 5000);
}
}
<div id="data">
<div class="ion-padding">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac eros est. Cras iaculis pulvinar arcu non vehicula. Fusce at quam a eros malesuada condimentum. Aliquam tincidunt tincidunt vehicula.
div>
<ion-list>
<ion-list-header>Dataion-list-header>
<ion-item>
<ion-avatar slot="start">
<img src="./avatar.svg">
ion-avatar>
<ion-label>
<h3>
Normal text
h3>
<p>
Lorem ipsum dolor sit amet, consectetur
p>
<p>
adipiscing elit.
p>
ion-label>
ion-item>
<ion-item>
<ion-thumbnail slot="start">
<img src="./thumbnail.svg">
ion-thumbnail>
<ion-label>
<h3>
Normal text
h3>
<p>
Lorem ipsum dolor sit amet, consectetur
p>
<p>
adipiscing elit.
p>
ion-label>
ion-item>
<ion-item>
<ion-icon name="call" slot="start">ion-icon>
<ion-label>
<h3>
Normal text
h3>
<p>
Lorem ipsum dolor sit amet, consectetur
p>
<p>
adipiscing elit.
p>
ion-label>
ion-item>
ion-list>
div>
<div id="skeleton">
<div class="ion-padding custom-skeleton">
<ion-skeleton-text animated style="width: 60%">ion-skeleton-text>
<ion-skeleton-text animated>ion-skeleton-text>
<ion-skeleton-text animated style="width: 88%">ion-skeleton-text>
<ion-skeleton-text animated style="width: 70%">ion-skeleton-text>
<ion-skeleton-text animated style="width: 60%">ion-skeleton-text>
div>
<ion-list>
<ion-list-header>
<ion-skeleton-text animated style="width: 20%">ion-skeleton-text>
ion-list-header>
<ion-item>
<ion-avatar slot="start">
<ion-skeleton-text animated>ion-skeleton-text>
ion-avatar>
<ion-label>
<h3>
<ion-skeleton-text animated style="width: 50%">ion-skeleton-text>
h3>
<p>
<ion-skeleton-text animated style="width: 80%">ion-skeleton-text>
p>
<p>
<ion-skeleton-text animated style="width: 60%">ion-skeleton-text>
p>
ion-label>
ion-item>
<ion-item>
<ion-thumbnail slot="start">
<ion-skeleton-text animated>ion-skeleton-text>
ion-thumbnail>
<ion-label>
<h3>
<ion-skeleton-text animated style="width: 50%">ion-skeleton-text>
h3>
<p>
<ion-skeleton-text animated style="width: 80%">ion-skeleton-text>
p>
<p>
<ion-skeleton-text animated style="width: 60%">ion-skeleton-text>
p>
ion-label>
ion-item>
<ion-item>
<ion-skeleton-text animated style="width: 27px; height: 27px" slot="start">ion-skeleton-text>
<ion-label>
<h3>
<ion-skeleton-text animated style="width: 50%">ion-skeleton-text>
h3>
<p>
<ion-skeleton-text animated style="width: 80%">ion-skeleton-text>
p>
<p>
<ion-skeleton-text animated style="width: 60%">ion-skeleton-text>
p>
ion-label>
ion-item>
ion-list>
div>
#data {
display: none;
}
/* Custom Skeleton Line Height and Margin */
.custom-skeleton ion-skeleton-text {
line-height: 13px;
}
.custom-skeleton ion-skeleton-text:last-child {
margin-bottom: 5px;
}
function onLoad() {
const skeletonEl = document.getElementById('skeleton');
const dataEl = document.