Empty 空状態 - Vant 4
# 📭 Empty 空状態
### 🎯 紹介
ユーザーが期待を込めてページを開いたとき、何もない状態になった場合のがっかり感を想像してみてください... 😔 ユーザーをこのような気まずい状態に置かないでください！Empty 空状態コンポーネントは親切な友人のように、コンテンツがないときに優しくユーザーに伝えます："ねえ、ここにはまだコンテンツがありませんが、心配しないでください、私たちは頑張っています！"
これは単なるプレースホルダーではなく、ユーザー体験の守護者です。可愛いイラスト、優しいテキストヒント、さらにはユーザーの次の行動を誘導するボタンを通じて、Empty コンポーネントは"空"を空虚なものではなく、可能性に満ちたものに変えます！✨
```### 📦 導入
以下の方法でコンポーネントをグローバルに登録します。詳細な登録方法については[コンポーネントの登録](./advanced-usage)を参照してください。
```js
import { createApp } from'vue'; import { Empty } from'vant'; const app = createApp(); app.use(Empty);🎯 コードデモ
🔧 基本的な使い方
最もシンプルな空状態は白紙のように、シンプルで優雅です。デフォルトの Empty コンポーネントは一般的な空状態アイコンと説明を表示し、ほとんどのシーンに適しています。
🖼️ 画像タイプ
Empty コンポーネントは多才な俳優のようで、複数の"絵文字顔"を内蔵しています！さまざまなシーンに応じて、次のように変身できます：
- 🔍 search - 検索結果がないときの困惑顔
- 🌐 network - ネットワーク異常時の切断顔
- ❌ error - エラー時の謝罪顔
- 📋 default - デフォルトの落ち着いた顔
📏 カスタムサイズ
空状態の画像が大きすぎると目立ちすぎたり、小さすぎると目立たないことがあります。心配しないでください！image-size 属性を使用すると、音量を調整するように簡単に画像サイズを調整し、最適なサイズを見つけることができます。
より細かく制御したい場合は、image-size を配列に設定して幅と高さを個別に指定できます。画像にぴったりのサイズを与えられます。
🎨 カスタム画像
標準的な画像では創造的なニーズを満たせませんか？問題ありません！Empty コンポーネントはあなたが好きなどんな画像 URL もサポートしており、空状態ページをユニークなものにすることができます。お家の可愛いペットや、会社のマスコットキャラクターなど、想像力を解き放ってください！
🎪 下部コンテンツ
空状態は終わりではなく、新しい始まりであるべきです！デフォルトのスロットを使用すると、Empty コンポーネントの下に任意のコンテンツを追加できます —— "再読み込み"ボタン、励ましの言葉、またはユーザーに他の操作を行うよう誘導するリンクなど。ユーザーに次に何をすべきかを知らせましょう！
API
Props
| パラメータ | 説明 | 型 | デフォルト値 |
|---|---|---|---|
| image | 画像のタイプ、オプションは error``network``search、画像 URL の指定もサポート | string | default |
| image-size | 画像のサイズ、デフォルトの単位は px | number | string | Array | - |
| description | 画像の下の説明テキスト | string | - |
Slots
| 名前 | 説明 |
|---|---|
| default | 下部コンテンツのカスタマイズ |
| image | アイコンのカスタマイズ |
| description | 説明テキストのカスタマイズ |
型定義
コンポーネントは以下の型定義をエクスポートします：
importtype { EmptyProps } from'vant';テーマカスタマイズ
スタイル変数
コンポーネントは次の CSS 変数を提供しており、カスタムスタイルに使用できます。使用方法については ConfigProvider コンポーネント を参照してください。
| 名前 | デフォルト値 | 説明 |
|---|---|---|
| --van-empty-padding | var(--van-padding-xl) 0 | - |
| --van-empty-image-size | 160px | - |
| --van-empty-description-margin-top | var(--van-padding-md) | - |
| --van-empty-description-padding | 0 60px | - |
| --van-empty-description-color | var(--van-text-color-2) | - |
| --van-empty-description-font-size | var(--van-font-size-md) | - |
| --van-empty-description-line-height | var(--van-line-height-md) | - |
| --van-empty-bottom-margin-top | 24px | - |
🔗 関連ドキュメント
完全なユーザー体験を構築する際、Empty コンポーネントはこれらの仲間たちと一緒によく登場し、それぞれの役割を果たして、スムーズなユーザー旅程を共同で作り上げます：
- Loading ローディング - Empty の良き相棒、データ読み込み時に先に登場して場を温めます
- Skeleton スケルトン - もう一つのロード状態の選択肢で、待ち時間をそれほど退屈なものにしません
- List リスト - リストにデータがある場合の表示コンポーネントで、Empty と完璧な対比を形成します
- Search 検索 - 検索結果がない場合、Empty コンポーネントは最高の慰めです
- Result 結果ページ - より複雑な状態フィードバックを処理し、Empty のアップグレード版です
- NoticeBar 通知バー - Empty と組み合わせて追加のヒント情報を提供できます
- Button ボタン - Empty の下部に操作ボタンを配置し、ユーザーの次の行動を誘導します
- Image 画像 - Empty 画像をカスタマイズする際の良き手助けです
- Icon アイコン - Empty 状態にさらに視覚的な要素を追加します