FloatingBubble フローティングバブル - Vant 4
🫧 FloatingBubble フローティングバブル
🎯 紹介
ページの隅にかわいい小さなバブルが静かに浮かんでいるのを想像してみてください。まるで親切なアシスタントのように、いつでもユーザーの手助けを待っています！🎈 FloatingBubble フローティングバブルコンポーネントは、まさにこのような不思議な存在です。
このコンポーネントはページの端に優雅に浮かぶだけでなく、自由なドラッグとスマートな磁石効果という超能力を持っています！ユーザーは好きな位置に自由にドラッグでき、最適な端にスマートに吸着します。カスタマーサービスの入口、クイック操作、ページの先頭に戻る機能など、FloatingBubble はよく使われる機能を簡単にアクセス可能にします！✨
💡 注意事項：このかわいいコンポーネントを使用するには、
vantのバージョンが 4.6.0 以上であることを確認してください！
📦 導入
以下の方法でグローバルにコンポーネントを登録します。詳細な登録方法についてはコンポーネントの登録を参照してください。
import { createApp } from'vue'; import { FloatingBubble } from'vant'; const app = createApp(); app.use(FloatingBubble);🎯 コードデモ
🔧 基本的な使い方
最も簡単な使い方から始めましょう！🚀 フローティングバブルはおとなしいペットのように、デフォルトでは右下隅に静かに待機しています。上下方向（y軸方向のみ）にドラッグすることができます。まるでかわいい猫をあやすような感覚です！icon 属性を使用すると、さまざまな「表情」に変えることができ、アプリのスタイルに合わせることができます。
import { showToast } from'vant'; exportdefault { setup() { constonClick = () => { showToast('バブルをクリック'); }; return { onClick }; }, };🎮 自由なドラッグと磁石効果
バブルのすべてのポテンシャルを解き放ちましょう！🌟 axis="xy" を設定すると、小さなバブルは完全な自由を得ます —— 画面上を自由に飛び回ることができます！さらに不思議なことに、手を離すと、まるで磁力があるかのように最近の端に自動的に吸着します。まるで最適な「駐車スペース」を見つけたようです。このスマートな磁石効果により、ユーザー体験はよりスムーズで自然になります！
import { showToast } from'vant'; exportdefault { setup() { constonOffsetChange = (offset) => { showToast(`x: ${offset.x.toFixed(0)}, y: ${offset.y.toFixed(0)}`); }; return { onOffsetChange }; }, };🔄 双方向バインディング
バブルの位置を正確に制御したいですか？問題ありません！🎯 v-model:offset を使用すると、まるでバブルにGPS位置決めシステムを取り付けたかのように、コードを通じて正確に表示位置を指示することができます。ユーザー操作への応答やビジネスロジックに応じた動的な位置調整など、双方向バインディングによってすべてが簡単かつ優雅になります！
import { ref } from'vue'; exportdefault { setup() { const offset = ref({ x: 200, y: 400 }); return { offset }; }, };API
Props
| パラメータ | 説明 | 型 | デフォルト値 |
|---|---|---|---|
| v-model:offset | バブルの位置を制御 | OffsetType | デフォルトは右下隅の座標 |
| axis | ドラッグ方向、xy は自由なドラッグ、lock はドラッグ禁止 🔒 | *'x' | 'y' |
| magnetic | 自動的に吸着する方向、バブルを磁石のようにスマートに吸着 🧲 | *'x' | 'y'* |
| icon | バブルのアイコン名または画像URL、バブルにかわいい表情を与える 😊 | string | - |
| gap | バブルとウィンドウの最小間隔、バブルに安全距離を設定 📏 | number | { x: number, y: number } | 24 | | teleport | マウント先のノードを指定、Teleportコンポーネントの to属性 と同じ | string | Element | body |
Events
| イベント名 | 説明 | コールバック引数 |
|---|---|---|
| click | コンポーネントをクリックしたときにトリガー | MouseEvent |
| offset-change | ユーザーのドラッグによって位置が変わった後にトリガー | {x: string, y: string} |
Slots
| 名前 | 説明 |
|---|---|
| default | バブルの表示内容をカスタマイズ |
型定義
コンポーネントは以下の型定義をエクスポートします：
exporttype { FloatingBubbleProps, FloatingBubbleAxis, FloatingBubbleMagnetic, FloatingBubbleOffset, } from'vant';テーマカスタマイズ
スタイル変数
コンポーネントは次のCSS変数を提供しており、スタイルのカスタマイズに使用できます。使用方法については ConfigProviderコンポーネント を参照してください。
| 名前 | デフォルト値 | 説明 |
|---|---|---|
| --van-floating-bubble-size | 48px | - |
| --van-floating-bubble-initial-gap | 24px | - |
| --van-floating-bubble-icon-size | 28px | - |
| --van-floating-bubble-background | var(--van-primary-color) | - |
| --van-floating-bubble-color | var(--van-background-2) | - |
| --van-floating-bubble-z-index | 999 | - |
| --van-floating-bubble-border-radius | --van-floating-bubble-border-radius | - |
📚 関連ドキュメント
FloatingBubble フローティングバブルはこれらのコンポーネントと組み合わせて使用することで、より豊かなインタラクティブ体験を提供できます：
- BackTop ページの先頭に戻る - 別のフローティングアシスタント、ページの先頭にすばやく戻る専用 🚀
- Icon アイコン - バブルに様々な表情を提供するアイコンライブラリ 🎭
- Button ボタン - バブルのトリガーやコンテンツ表示として使用可能 🔘
- Overlay オーバーレイ - バブルと組み合わせてモーダルインタラクション効果を作成 🎪
- Popup ポップアップ - バブルクリック後のコンテンツ表示コンテナ 📦
- ActionSheet アクションシート - バブルによってトリガーされる操作選択パネル 📋
- Toast トースト - バブル操作後のフィードバック通知 💬
- Dialog ダイアログ - バブルによってトリガーされる確認または情報ダイアログ 💭