NoticeBar 通知バー - Vant 4

📢 NoticeBar 通知バー

🎯 紹介

NoticeBar コンポーネントは一連のメッセージ通知を循環再生して表示するために使用され、重要な情報をより目立たせます！スクロール再生、複数行表示などの機能をサポートしています。

📦 導入

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

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

🎯 コード例

🔧 基本的な使い方

text 属性で通知バーの内容を設定し、left-icon 属性で通知バーの左側のアイコンを設定します。メッセージに目立つ服を着せるようなものです！👕

<van-notice-bar
  left-icon="volume-o"
  text="コードを読む過程で人々が罵り言葉を使う頻度は、コード品質を測る唯一の基準です。"
/>

📜 スクロール再生

通知バーの内容が長すぎる場合、自動的にスクロール再生が開始されます。回転灯のように優雅に長いテキストを表示します！🎠 scrollable 属性でこの動作を制御できます。

<!-- 文字が短い場合、スクロール再生を無効にする -->
<van-notice-bar :scrollable="false" text="通知内容" />

<!-- 文字が長い場合、スクロール再生を有効にする -->
<van-notice-bar
  text="コードを読む過程で人々が罵り言葉を使う頻度は、コード品質を測る唯一の基準です。"
/>

📝 複数行表示

文字が長い場合、wrapable 属性を設定することで複数行表示を有効にできます。長いテキストを詩のように改行して表示します！📖

<van-notice-bar
  wrapable
  :scrollable="false"
  text="コードを読む過程で人々が罵り言葉を使う頻度は、コード品質を測る唯一の基準です。"
/>

🎭 通知バーモード

通知バーは closeable と link の2種類のモードをサポートし、ユーザーが閉じたり遷移したりできるようにします！

<!-- 閉じることができるモード -->
<van-notice-bar mode="closeable">
  通知内容
</van-notice-bar>

<!-- リンクモード -->
<van-notice-bar mode="link">
  通知内容
</van-notice-bar>

🎨 カスタムスタイル

color 属性でテキストの色を設定し、background 属性で背景色を設定して、通知バーに独特の「魅力」を与えます！✨

<van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="info-o">
  通知内容
</van-notice-bar>

🎢 垂直スクロール

NoticeBar と Swipe コンポーネントを組み合わせることで、垂直スクロールの効果を実現できます。エレベーターのように上下にメッセージを切り替えます！🏢

<van-notice-bar left-icon="volume-o" :scrollable="false">
  <van-swipe
    vertical
    class="notice-swipe"
    :autoplay="3000"
    :show-indicators="false"
  >
    <van-swipe-item>明月直看山头树</van-swipe-item>
    <van-swipe-item>无限青山烟雾中</van-swipe-item>
    <van-swipe-item>千里江山寒色远</van-swipe-item>
  </van-swipe>
</van-notice-bar>

<style>
.notice-swipe {
  height: 40px;
  line-height: 40px;
}
</style>

📋 API

🎛️ プロパティ

パラメータ	説明	型	デフォルト値
mode	通知バーのモード、closeable link から選択可能、インタラクション方法を決定 🎭	string	''
text	通知テキストの内容、メッセージの中核内容 📝	string	''
color	通知テキストの色、文字をより目立たせる 🎨	string	#ed6a0c
background	通知バーの背景色、視覚的な雰囲気を作り出す 🌈	string	#fffbe8
left-icon	左側のアイコン名または画像リンク、Icon コンポーネントの name 属性 と同等 🎯	string	-
delay	アニメーションの遅延時間 (s)、スクロール開始のタイミングを制御 ⏰	number | string	1
speed	スクロール速度 (px/s)、文字のスクロール速度を制御 🏃	number | string	60
scrollable	スクロール再生を有効にするかどうか、内容が長すぎる場合はデフォルトで有効 🎠	boolean	-
wrapable	テキストの改行を有効にするかどうか、スクロールが無効な場合のみ有効 📖	boolean	false

🎪 イベント

イベント名	説明	コールバック引数
click	通知バーをクリックしたときにトリガーされ、遷移などの操作を実行可能 👆	event: MouseEvent
close	通知バーを閉じたときにトリガーされ、ユーザーがメッセージを手動で閉じる ❌	event: MouseEvent
replay	スクロールバーが再びスクロールを開始するたびにトリガーされ、循環再生のリズム 🔄	-

🔧 メソッド

ref を使用して NoticeBar のインスタンスを取得し、インスタンスメソッドを呼び出すことができます。詳細についてはコンポーネントのインスタンスメソッドを参照してください。

メソッド名	説明	パラメータ	戻り値
reset	通知バーを初期状態にリセットし、スクロールをやり直す 🔄	-	-

📝 型定義

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

import type { NoticeBarMode, NoticeBarProps, NoticeBarInstance } from 'vant';

NoticeBarInstance はコンポーネントインスタンスの型で、以下のように使用します：

import { ref } from 'vue';
import type { NoticeBarInstance } from 'vant';

const noticeBarRef = ref<NoticeBarInstance>();
noticeBarRef.value?.reset();

🎰 スロット

名前	内容
default	通知テキストの内容、メッセージ表示をカスタマイズ可能 📝
left-icon	左側のアイコンをカスタマイズ、個性的なアイコン表示 ⬅️
right-icon	右側のアイコンをカスタマイズ、操作ボタンを追加 ➡️

🎨 テーマカスタマイズ

🎛️ スタイル変数

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

名前	デフォルト値	説明
--van-notice-bar-height	40px	通知バーの高さ 📏
--van-notice-bar-padding	0 var(--van-padding-md)	通知バーの内側の余白 📦
--van-notice-bar-wrapable-padding	var(--van-padding-xs) var(--van-padding-md)	複数行モードの内側の余白 📖
--van-notice-bar-text-color	var(--van-orange-dark)	文字の色 ✏️
--van-notice-bar-font-size	var(--van-font-size-md)	フォントサイズ 📝
--van-notice-bar-line-height	24px	行の高さ 📐
--van-notice-bar-background	var(--van-orange-light)	背景色 🎨
--van-notice-bar-icon-size	16px	アイコンのサイズ 🎯
--van-notice-bar-icon-min-width	24px	アイコンの最小幅 📏

📚 関連文書

• Icon アイコン - アイコンコンポーネント
• Swipe スワイプ - スワイプコンポーネント
• Toast トースト - トーストコンポーネント
• Dialog ダイアログ - ダイアログコンポーネント