ion-skeleton-text

shadow

Skeleton Textは、placeholderコンテンツをレンダリングするためのコンポーネントです。要素は、指定した幅でグレーのブロックをレンダリングします。

基本的な使い方

src/app/example.component.html

<ion-list *ngIf="loaded">
  <ion-list-header>Albums</ion-list-header>
  <ion-item>
    <ion-thumbnail slot="start">
      <ion-icon style="width: 100%; height: 100%" name="musical-notes"></ion-icon>
    </ion-thumbnail>
    <ion-label>
      <h3>Abbey Road</h3>
      <p>The Beatles</p>
      <p>1969</p>
    </ion-label>
  </ion-item>
</ion-list>

<ion-list *ngIf="!loaded">
  <ion-list-header>
    <ion-skeleton-text [animated]="true" style="width: 80px"></ion-skeleton-text>
  </ion-list-header>
  <ion-item>
    <ion-thumbnail slot="start">
      <ion-skeleton-text [animated]="true"></ion-skeleton-text>
    </ion-thumbnail>
    <ion-label>
      <h3>
        <ion-skeleton-text [animated]="true" style="width: 80%;"></ion-skeleton-text>
      </h3>
      <p>
        <ion-skeleton-text [animated]="true" style="width: 60%;"></ion-skeleton-text>
      </p>
      <p>
        <ion-skeleton-text [animated]="true" style="width: 30%;"></ion-skeleton-text>
      </p>
    </ion-label>
  </ion-item>
</ion-list>

<ion-button (click)="loaded = !loaded">Toggle</ion-button>

src/app/example.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: 'example.component.html',
  styleUrls: ['example.component.css']
})
export class ExampleComponent {
  public loaded = false;
}

テーマ

CSSカスタムプロパティ

src/app/example.component.html

<ion-list>
  <ion-list-header>
    <ion-skeleton-text [animated]="true" style="width: 80px"></ion-skeleton-text>
  </ion-list-header>
  <ion-item>
    <ion-thumbnail slot="start">
      <ion-skeleton-text [animated]="true"></ion-skeleton-text>
    </ion-thumbnail>
    <ion-label>
      <h3>
        <ion-skeleton-text [animated]="true" style="width: 80%;"></ion-skeleton-text>
      </h3>
      <p>
        <ion-skeleton-text [animated]="true" style="width: 60%;"></ion-skeleton-text>
      </p>
      <p>
        <ion-skeleton-text [animated]="true" style="width: 30%;"></ion-skeleton-text>
      </p>
    </ion-label>
  </ion-item>
</ion-list>

src/app/example.component.css

ion-skeleton-text {
  --border-radius: 9999px;
  --background: rgba(188, 0, 255, 0.065);
  --background-rgb: 188, 0, 255;
}

プロパティ

animated

Description	trueの場合、スケルトンテキストをアニメーションさせる。
Attribute	animated
Type	boolean
Default	false

イベント

No events available for this component.

メソッド

No public methods available for this component.

CSS Shadow Parts

No CSS shadow parts available for this component.

CSSカスタムプロパティ

Name	Description
--background	スケルトンテキストの背景
--background-rgb	スケルトンテキストの背景（rgb形式
--border-radius	スケルトンテキストのボーダー半径

Slots

No slots available for this component.