Overlay オーバーレイ - Vant 4

🎭 Overlay オーバーレイ

🎯 紹介

Overlay コンポーネントはページ上にオーバーレイを作成し、特定のページ要素を強調表示し、ユーザーが他の操作を行うのを防ぎます。ページの焦点をより明確にします！

📦 導入

以下の方法でグローバルにコンポーネントを登録します。詳細な登録方法についてはコンポーネントの登録を参照してください。

import { createApp } from'vue'; import { Overlay } from'vant'; const app = createApp(); app.use(Overlay);

🎯 コード例

🔧 基本的な使い方

最もシンプルなオーバーレイです。ページに神秘的なベールをかけるようなものです 🎭

html

<template>
  <div>
    <van-button type="primary" @click="show = true">オーバーレイを表示</van-button>
    <van-overlay :show="show" @click="show = false" />
  </div>
</template>

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

const show = ref(false);
</script>

📦 コンテンツを埋め込む

オーバーレイ上に任意のコンテンツを配置し、重要な情報を際立たせます ✨

html

<template>
  <div>
    <van-button type="primary" @click="show = true">コンテンツを埋め込む</van-button>
    <van-overlay :show="show" @click="show = false">
      <div class="wrapper">
        <div class="block" @click.stop>
          <h3>埋め込まれたコンテンツ 📝</h3>
          <p>オーバーレイの外側をクリックすると閉じます</p>
          <van-button type="primary" @click="show = false">閉じる</van-button>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

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

const show = ref(false);
</script>

<style>
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 120px;
  height: 120px;
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
}
</style>

🔢 z-index を設定

オーバーレイの表示階層を制御し、適切な位置に表示します 📚

html

<template>
  <div>
    <van-button type="primary" @click="show = true">高階層オーバーレイ</van-button>
    <van-overlay :show="show" :z-index="100" @click="show = false">
      <div class="wrapper">
        <div class="block" @click.stop>
          <p>z-index: 100 🔝</p>
          <van-button size="small" @click="show = false">閉じる</van-button>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

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

const show = ref(false);
</script>

<style>
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 120px;
  height: 80px;
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
}
</style>

API

プロパティ

パラメータ	説明	型	デフォルト値
show	オーバーレイを表示するかどうか、オーバーレイの表示・非表示を制御 👁️	boolean	`false`
z-index	z-index 階層、オーバーレイの表示レベルを制御 📚	number \| string	`1`
duration	アニメーションの時間（秒単位）、0 に設定するとアニメーションを無効にできます ⏱️	number \| string	`0.3`
class-name	カスタムクラス名、個性的なスタイルを追加 🎨	string	-
custom-style	カスタムスタイル、スタイルオブジェクトを直接設定 ✨	object	-
lock-scroll	背景のスクロールをロックするかどうか、ロックするとオーバーレイ内のコンテンツもスクロールできなくなります 🔒	boolean	`true`
lazy-render	表示時にのみノードをレンダリングするかどうか、パフォーマンスを最適化 🚀	boolean	`true`
teleport	マウント先のノードを指定、Teleport コンポーネントの to 属性と同等 🎯	string \| Element	-

イベント

イベント名	説明	コールバック引数
click	クリック時にトリガー、オーバーレイのクリックイベントを処理 👆	event: MouseEvent

スロット

名前	説明
default	デフォルトスロット、オーバーレイの上にコンテンツを埋め込むために使用 📦

型定義

コンポーネントは以下の型定義をエクスポートします。TypeScript 開発をよりスムーズに行うことができます 📝

importtype { OverlayProps } from'vant';

テーマカスタマイズ

スタイル変数

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

名前	デフォルト値	説明
--van-overlay-z-index	1	オーバーレイ階層 📚
--van-overlay-background	rgba(0, 0, 0, 0.7)	オーバーレイの背景色 🎨

📚 関連文書

ポップアップ系コンポーネント

Popup ポップアップ - 強力なポップアップコンポーネントで、複数のポップアップ位置をサポート 📱
Dialog ダイアログ - ダイアログと確認ボックスコンポーネント、ユーザーインタラクションに不可欠 💬
ActionSheet アクションシート - 下部アクション選択パネル、操作オプションが明確 📋
Popover ポップオーバー - 軽量なバブルヒントコンポーネント 💭

フィードバック系コンポーネント

Toast トースト - 軽量なメッセージ通知コンポーネント 🍞
Notify メッセージ通知 - 上部メッセージ通知バーコンポーネント 📢
Loading ローディング - ローディング状態インジケータ、ユーザーエクスペリエンスを向上 ⏳

ナビゲーション系コンポーネント

NavBar ナビゲーションバー - ページ上部のナビゲーションバーコンポーネント 🧭
Tabbar タブバー - 下部タブバーナビゲーションコンポーネント 📱
Sidebar サイドバーナビゲーション - サイドバーナビゲーションコンポーネント 📋

🎭 Overlay オーバーレイ ​

🎯 紹介 ​

📦 導入 ​

🎯 コード例 ​

🔧 基本的な使い方 ​

📦 コンテンツを埋め込む ​

🔢 z-index を設定 ​

API ​

プロパティ ​

イベント ​

スロット ​

型定義 ​

テーマカスタマイズ ​

スタイル変数 ​

📚 関連文書 ​

ポップアップ系コンポーネント ​

フィードバック系コンポーネント ​

ナビゲーション系コンポーネント ​

🎭 Overlay オーバーレイ

🎯 紹介

📦 導入

🎯 コード例

🔧 基本的な使い方

📦 コンテンツを埋め込む

🔢 z-index を設定

API

プロパティ

イベント

スロット

型定義

テーマカスタマイズ

スタイル変数

📚 関連文書

ポップアップ系コンポーネント

フィードバック系コンポーネント

ナビゲーション系コンポーネント