FloatingPanel フローティングパネル - Vant 4
📱 FloatingPanel フローティングパネル
🎯 紹介
ページの下部から静かに顔を出す不思議な引き出しを想像してみてください。まるで発見されるのを待っている恥ずかしがり屋の小精霊のようです！🧚♀️ FloatingPanel フローティングパネルは、まさにこのような魅力的なコンポーネントです。
このコンポーネントはページの下部に静かに待機しており、ユーザーが軽くドラッグするだけで、この眠っているパネルを目覚めさせ、優雅に展開して隠された宝物のようなコンテンツを明らかにします！詳細情報の表示、クイック操作の提供、複数階層のコンテンツ表示など、FloatingPanel は絹のような滑らかなインタラクティブ体験をもたらします。✨
携帯電話のコントロールセンターのように、ユーザーはパネルを自由に異なる高さにドラッグすることができ、スライドするたびに探索の喜びがいっぱいです！
\u003e 💡 注意事項：この優雅なコンポーネントを使用するには、vant のバージョンが 4.5.0 以上であることを確認してください！
📦 導入
以下の方法でグローバルにコンポーネントを登録します。詳細な登録方法についてはコンポーネントの登録を参照してください。
import { createApp } from'vue'; import { FloatingPanel } from'vant'; const app = createApp(); app.use(FloatingPanel);🎯 コードデモ
🔧 基本的な使い方
最も簡単な使い方から始めましょう！🚀 FloatingPanel はおとなしいペットのように、デフォルトではページ下部に 100px の小さな頭をだしています。しかし、ユーザーが軽くドラッグすると、興奮して跳び上がり、画面の高さの 60% まで展開します。まるで目覚めた小さな猫がのびをするような可愛らしい様子です！
⚓ カスタムアンカーポイント
パネルをよりスマートにしたいですか？🎯 anchors 属性を使用すると、パネルに複数の「駐車スペース」を設定できます！エレベーターが異なる階を持っているのと同じように、パネルはこれらの事前設定された高さの位置にスマートに停止します。
v-model:height 双方向バインディングと組み合わせると、パネルの現在の「階」位置を正確に制御することもできます。たとえば、パネルを 3 つの理想的な位置で停止させることができます：100px（1階ロビー）、画面の高さの 40%（2階展示ホール）、画面の高さの 70%（3階パノラマ）：
import { ref } from'vue'; exportdefault { setup() { const anchors = [ 100, Math.round(0.4 * window.innerHeight), Math.round(0.7 * window.innerHeight), ]; const height = ref(anchors[0]); return { anchors, height }; }, };🎮 ヘッダーのみのドラッグ
時々、パネルのコンテンツエリアに「邪魔されずに」専念してもらいたいことがあるかもしれません！🎭 デフォルトでは、FloatingPanel のヘッダーとコンテンツエリアはどちらも「気さく」で、ユーザーはどこでもパネルをドラッグできます。
しかし、コンテンツエリアにスクロールやその他のインタラクションに専念してほしい場合は、content-draggable="false" を設定することで、コンテンツエリアに「仕事に集中」させ、ユーザーがヘッダーエリアを通じてのみパネルの昇降を制御できるようにすることができます。まるでパネルに「指揮官の帽子」をかぶせたようです！👑
API
Props
| パラメータ | 説明 | 型 | デフォルト値 |
|---|---|---|---|
| v-model:height | 現在のパネルの表示高さ | number | string | 0 |
| anchors | カスタムアンカーポイントの設定、パネルにエレベーターの階ボタンを取り付けるようなもの 🏢 | number[] | [100, window.innerHeight * 0.6] |
| duration | アニメーションの時間、パネルの昇降の優雅さを制御 ⏱️ | number | string | 0.3 |
| content-draggable | コンテンツコンテナのドラッグを許可、コンテンツエリアもドラッグに「参加」できるようにする 🎮 | boolean | true |
lock-scroll v4.6.4 | ドラッグしていないときに、背景のスクロールをロックするかどうか、「一心二用」を防ぐ 🔒 | boolean | false |
| safe-area-inset-bottom | 底部安全区適合 を有効にするかどうか | boolean | true |
Events
| イベント名 | 説明 | コールバック引数 |
|---|---|---|
| height-change | パネルの表示高さが変わり、ドラッグが終了した後にトリガー | { height: number } |
Slots
| 名前 | 説明 |
|---|---|
| default | パネルの内容をカスタマイズ |
| header | パネルのヘッダーをカスタマイズ |
型定義
コンポーネントは以下の型定義をエクスポートします：
importtype { FloatingPanelProps } from'vant';テーマカスタマイズ
スタイル変数
コンポーネントは次のCSS変数を提供しており、スタイルのカスタマイズに使用できます。使用方法については ConfigProviderコンポーネント を参照してください。
| 名前 | デフォルト値 | 説明 |
|---|---|---|
| --van-floating-panel-border-radius | 16px | - |
| --van-floating-panel-header-height | 30px | - |
| --van-floating-panel-z-index | 999 | - |
| --van-floating-panel-background | var(--van-background-2) | - |
| --van-floating-panel-bar-width | 20px | - |
| --van-floating-panel-bar-height | 3px | - |
| --van-floating-panel-bar-color | var(--van-gray-5) | - |
📚 関連ドキュメント
FloatingPanel フローティングパネルはこれらのコンポーネントと組み合わせて使用することで、より豊かなインタラクティブ体験を提供できます：
- Popup ポップアップ - モーダルインタラクションにより適した別のコンテンツ表示方法 🎪
- ActionSheet アクションシート - 下部からポップアップする操作選択パネル 📋
- Overlay オーバーレイ - パネルに背景マスク効果を追加 🎭
- PullRefresh プルリフレッシュ - パネルコンテンツのリフレッシュインタラクション 🔄
- FloatingBubble フローティングバブル - パネルをトリガーするフローティングボタン 🫧
- BackTop ページの先頭に戻る - パネルコンテンツのクイックナビゲーション 🚀
- Sticky スティッキー - パネル内の固定要素 📌
- List リスト - パネルコンテンツの一般的な表示形式 📝
- Tab タブ - パネル内の複数タブコンテンツ切り替え 🏷️