Skeleton 骨架屏 - Vant 4

Skeleton スケルトン

読み込み中のプレースホルダー表示。

基本的な使い方

データの読み込み中にスケルトン画面を表示します。

<van-skeleton title :row="3" />

コードデモ

基本的な使い方

<van-skeleton />

アニメーション表示

<van-skeleton animated />

タイトル表示

<van-skeleton title />

行数表示

<van-skeleton :row="3" />

タイトルと行の組み合わせ

<van-skeleton title :row="3" />

アバター表示

<van-skeleton avatar />

スロットコンテンツ

<van-skeleton>
  <template #template>
    <div>カスタムスケルトン</div>
  </template>
</van-skeleton>

ローディング制御

<template>
  <div>
    <van-skeleton :loading="loading" animated>
      <template #template>
        <div>読み込み中...</div>
      </template>
      <div>実際のコンテンツ</div>
    </van-skeleton>
    <van-button @click="toggleLoading">ローディング切り替え</van-button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const loading = ref(true);
    
    const toggleLoading = () => {
      loading.value = !loading.value;
    };
    
    return {
      loading,
      toggleLoading,
    };
  },
};
</script>

カードのスケルトン

<template>
  <van-card>
    <template #title>
      <van-skeleton title :row="2" />
    </template>
    <template #desc>
      <van-skeleton :row="3" />
    </template>
  </van-card>
</template>

リストのスケルトン

<template>
  <div>
    <van-skeleton v-for="i in 3" :key="i" title :row="2" style="margin-bottom: 16px;" />
  </div>
</template>

📋 API

🎛️ プロパティ

パラメータ	説明	タイプ	デフォルト値
loading	スケルトンを表示するかどうか	boolean	true
animated	アニメーションを有効にするかどうか	boolean	false
avatar	アバターを表示するかどうか	boolean	false
avatar-shape	アバターの形状、オプション値は round、square	string	round
avatar-size	アバターのサイズ	number | string	32px
title	タイトルを表示するかどうか	boolean	false
title-width	タイトルの幅	number | string	40%
row	段落の行数	number	0
row-width	段落の行の幅	number | string | Array	100%
round	丸みを帯びたスタイルを有効にするかどうか	boolean	false

🎭 スロット

名称	説明
default	実際のコンテンツ
template	カスタムスケルトンテンプレート

🎨 スタイル変数

コンポーネントは以下のCSS変数を提供し、カスタマイズに使用できます。使用方法については ConfigProviderコンポーネントを参照してください。

変数名	デフォルト値	説明
--van-skeleton-avatar-size	32px	アバターのサイズ
--van-skeleton-title-height	16px	タイトルの高さ
--van-skeleton-title-width	40%	タイトルの幅
--van-skeleton-row-height	16px	行の高さ
--van-skeleton-row-margin-top	var(--van-padding-sm)	行の上マージン
--van-skeleton-animation-duration	1.2s	アニメーションの継続時間
--van-skeleton-round-border-radius	var(--van-radius-lg)	丸みを帯びたスタイルの境界線の半径

📘 タイプ定義

コンポーネントは以下のタイプ定義をエクスポートし、TypeScriptプロジェクトでの使用に便利です：

import type { SkeletonProps, SkeletonAvatarShape } from 'vant';

🎨 テーマカスタマイゼ

🎭 スタイル変数

コンポーネントは以下のCSS変数を提供し、カスタマイズに使用できます。使用方法については ConfigProviderコンポーネントを参照してください。