Loading ローディング - Vant 4
⏳ Loading ローディング
🎯 紹介
Loading コンポーネントは、「時間の魔法使い」✨ のようなものです！ユーザーがデータのロードや操作の処理を待つ必要があるとき、優雅に現れ、回転するアニメーションで「急がないで、良いものが来ています」とユーザーに伝えます。ネットワークリクエスト、ファイルのアップロード、複雑な計算など、どのような場合でも、Loading は待ち時間を不安にさせず、むしろ期待に満ちたものに変えることができます！
📦 導入
以下の方法でコンポーネントをグローバルに登録します。詳細な登録方法についてはコンポーネントの登録を参照してください。
import { createApp } from'vue'; import { Loading } from'vant'; const app = createApp(); app.use(Loading);🚀 コードサンプル
🎨 ローディングのタイプ
type 属性でローディングアイコンのタイプを設定できます。まるで異なる「回転ダンス」💃 を選ぶかのようです！デフォルトは circular（円形回転）で、spinner（花びら回転）も選択できます。どのタイプも独自のリズムと美感があります。
🌈 カスタムカラー
color 属性でローディングアイコンの色を設定し、あなたの Loading に専属の「虹のコート」🌈 を着せましょう！
📏 カスタムサイズ
size 属性でローディングアイコンのサイズを設定します。デフォルトの単位は px です。ミニの精巧さから威厳のあるものまで、サイズはあなた次第！
💬 ローディングテキスト
デフォルトのスロットを使用して、アイコンの右側にローディングテキストを挿入することができます。ユーザーに親切な「メモ」📝 を渡し、何が起こっているかを伝えましょう。
📱 垂直配置
vertical 属性を設定すると、アイコンとテキストが垂直に配置され、「上下のベッド」のように整然と並びます！
🎨 カスタムテキストカラー
color または text-color 属性でローディングテキストの色を設定し、文字にも美しい「カラーコート」を着せましょう！
🎭 カスタムアイコン
icon スロットでローディングアイコンをカスタマイズできます。あなたの創造力を発揮して、独自のローディングアニメーションを作りましょう！
API
Props
| パラメータ | 説明 | 型 | デフォルト値 |
|---|---|---|---|
| color | カラー | string | #c9c9c9 |
| type | タイプ。オプションは spinner | string | circular |
| size | ローディングアイコンのサイズ。デフォルトの単位は px | number | string | 30px |
| text-size | 文字サイズ。デフォルトの単位は px | number | string | 14px |
| text-color | 文字の色 | string | #c9c9c9 |
| vertical | アイコンとテキストコンテンツを垂直に配置するかどうか | boolean | false |
Slots
| 名前 | 説明 |
|---|---|
| default | ローディングテキスト |
| icon | カスタムローディングアイコン |
型定義
コンポーネントは以下の型定義をエクスポートしています：
importtype { LoadingType, LoadingProps } from'vant';テーマカスタマイズ
スタイル変数
コンポーネントは以下の CSS 変数を提供しており、カスタムスタイルに使用できます。使用方法については ConfigProvider コンポーネント を参照してください。
| 名前 | デフォルト値 | 説明 |
|---|---|---|
| --van-loading-text-color | var(--van-text-color-2) | - |
| --van-loading-text-font-size | var(--van-font-size-md) | - |
| --van-loading-spinner-color | var(--van-gray-5) | - |
| --van-loading-spinner-size | 30px | - |
| --van-loading-spinner-duration | 0.8s | - |
📚 関連ドキュメント
🔄 状態フィードバック
- Toast 軽い通知 - 軽い通知コンポーネント。短いメッセージの優雅な表示
- Dialog ダイアログ - ダイアログコンポーネント。重要な情報の強調表示
- Notify 通知 - 通知コンポーネント。状態変化の即時フィードバック
- Skeleton スケルトンスクリーン - スケルトンスクリーンコンポーネント。コンテンツローディングの優雅な遷移
📋 リスト関連
- List リスト - リストコンポーネント。無限スクロールの完璧な相棒
- PullRefresh プルリフレッシュ - プルリフレッシュコンポーネント。データ更新のスムーズな体験
- SwipeCell スワイプセル - スワイプセルコンポーネント。操作フィードバックの親切なヒント
🎨 デザインコンポーネント
- Empty 空の状態 - 空の状態コンポーネント。データがない場合の友好的なヒント
- ConfigProvider グローバル設定 - グローバル設定コンポーネント。テーマスタイルを統一的に管理
- Icon アイコン - アイコンコンポーネント。豊富な視覚要素のライブラリ
🚀 パフォーマンス最適化
- Lazyload レイジーロード - レイジーロードコンポーネント。ページパフォーマンスを向上させる神器
- ImagePreview 画像プレビュー - 画像プレビューコンポーネント。メディアローディングの最適化された体験
- Image 画像 - 画像コンポーネント。スマートローディングの完璧な実装
🛠️ 開発ガイド
- Advanced Usage 高度な使い方 - 高度な使い方ガイド。コンポーネントインスタンスメソッドの詳細