NavBar ナビゲーションバー - Vant 4

🧭 NavBar ナビゲーションバー

🎯 紹介

NavBar コンポーネントはページのナビゲーション機能を提供し、ページにナビゲーション機能を提供します。ページの上部によく使用されます。タイトル表示、左側の戻るボタン、右側のボタンなどの機能をサポートし、ページのナビゲーションをより明確にします！

📦 導入

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

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

🎯 コード例

🔧 基本的な使い方

title 属性でナビゲーションバーのタイトルを設定します。ページに美しい帽子をかぶせるようなものです！🎩

<van-navbar title="タイトル" />

⬅️ 前のページに戻る

ナビゲーションバーで前のページに戻る機能を実装し、ユーザーが簡単に帰る道を見つけられるようにします！🏠

<van-navbar
  title="タイトル"
  left-text="戻る"
  left-arrow
  @click-left="onClickLeft"
/>

export default {
  setup() {
    const onClickLeft = () => history.back();
    return {
      onClickLeft,
    };
  },
};

➡️ 右側のボタン

ナビゲーションバーの右側にクリック可能なボタンを追加します。工具箱に便利な小道具を追加するようなものです！🔧

<van-navbar
  title="タイトル"
  left-text="戻る"
  right-text="ボタン"
  left-arrow
  @click-left="onClickLeft"
  @click-right="onClickRight"
/>

import { showToast } from 'vant';

export default {
  setup() {
    const onClickLeft = () => history.back();
    const onClickRight = () => showToast('ボタン');
    return {
      onClickLeft,
      onClickRight,
    };
  },
};

🎨 スロットの使用

スロットを通じてナビゲーションバーの両側の内容をカスタマイズできます。家の装飾のように自由に創造力を発揮できます！✨

<van-navbar title="タイトル" left-arrow @click-left="onClickLeft">
  <template #right>
    <van-icon name="search" size="18" />
  </template>
</van-navbar>

🚫 ボタンを無効にする

left-disabled または right-disabled 属性で両側のボタンを無効にできます。ボタンが無効になると透明度が低下し、クリックできなくなります。ボタンに「邪魔しないでください」のタグをつけるようなものです！😴

<van-navbar
  title="タイトル"
  left-text="戻る"
  right-text="ボタン"
  left-arrow
  right-disabled
  @click-left="onClickLeft"
  @click-right="onClickRight"
/>

📋 API

🎛️ プロパティ

パラメータ	説明	型	デフォルト値
title	タイトルテキスト、ナビゲーションバーの"表札" 🏷️	string	''
left-text	左側のテキスト、通常は"戻る"ボタン ⬅️	string	''
right-text	右側のテキスト、"完了"、"保存"などが可能 ➡️	string	''
left-disabled v4.6.8	左側のボタンを無効にするかどうか、無効にすると透明度が低下し、クリックできなくなる 🚫	boolean	false
right-disabled v4.6.8	右側のボタンを無効にするかどうか、無効にすると透明度が低下し、クリックできなくなる 🚫	boolean	false
left-arrow	左側の矢印を表示するかどうか、ユーザーに戻る方向を示す 🏹	boolean	false
border	下の境界線を表示するかどうか、ナビゲーションバーに区切り線を追加 📏	boolean	true
fixed	上部に固定するかどうか、ナビゲーションバーを常に表示 📌	boolean	false
placeholder	上部に固定した場合、タグの位置に同じ高さのプレースホルダー要素を生成するかどうか 🎭	boolean	false
z-index	ナビゲーションバーの階層、表示の優先度を制御 📚	number | string	1
safe-area-inset-top	上部の安全領域の適応を有効にするかどうか、ノッチ付きスクリーンに対応 📱	boolean	false
clickable	両側のボタンのクリックフィードバックを有効にするかどうか、触覚体験を提供 👆	boolean	true

🎰 スロット

名前	説明
title	カスタムタイトル、タイトル領域をより個性的に 🎨
left	左側の領域の内容をカスタマイズ、アイコンやその他の要素を配置可能 ⬅️
right	右側の領域の内容をカスタマイズ、ボタンやアイコンを配置可能 ➡️

🎪 イベント

イベント名	説明	コールバック引数
click-left	左側のボタンをクリックしたときにトリガーされ、通常は戻る操作に使用 👈	event: MouseEvent
click-right	右側のボタンをクリックしたときにトリガーされ、様々な操作を実行可能 👉	event: MouseEvent

📝 型定義

コンポーネントは以下の型定義をエクスポートします：

import type { NavBarProps } from 'vant';

🎨 テーマカスタマイズ

🎛️ スタイル変数

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

名前	デフォルト値	説明
--van-nav-bar-height	46px	ナビゲーションバーの高さ 📏
--van-nav-bar-background	var(--van-background-2)	ナビゲーションバーの背景色 🎨
--van-nav-bar-arrow-size	16px	矢印アイコンのサイズ 🏹
--van-nav-bar-icon-color	var(--van-primary-color)	アイコンの色 🎯
--van-nav-bar-text-color	var(--van-primary-color)	テキストの色 ✏️
--van-nav-bar-title-font-size	var(--van-font-size-lg)	タイトルのフォントサイズ 📝
--van-nav-bar-title-text-color	var(--van-text-color)	タイトルのテキスト色 🏷️
--van-nav-bar-z-index	1	ナビゲーションバーの階層 📚

📚 関連文書

• Icon アイコン - アイコンコンポーネント
• Button ボタン - ボタンコンポーネント
• Tabbar タブバー - タブバーコンポーネント
• Tab タブページ - タブページコンポーネント