ActionBar アクションバー - Vant 4
ActionBar アクションバー
🎯 紹介
アクションバーはモバイルアプリの便利なアシスタントです！通常、ページの下部に固定され、ユーザーに迅速な操作エントリーポイントを提供します。ショッピングカート、お気に入り、シェア、または即購入など、アクションバーによってユーザーはさまざまな操作を簡単に完了でき、ユーザーエクスペリエンスが大幅に向上します。
📦 導入
以下の方法でグローバルにコンポーネントを登録します。詳細な登録方法についてはコンポーネント登録を参照してください。
import { createApp } from 'vue';
import { ActionBar, ActionBarIcon, ActionBarButton } from 'vant';
const app = createApp();
app.use(ActionBar);
app.use(ActionBarIcon);
app.use(ActionBarButton);🚀 コードデモ
基本的な使い方
最もシンプルなアクションバーはアイコンとボタンで構成されています。アイコンは通常、二次的な操作（お気に入りやシェアなど）に使用され、ボタンは主要な操作（カートに追加、即購入など）に使用されます。
<van-action-bar>
<van-action-bar-icon icon="chat-o" text="カスタマーサービス" @click="onClickIcon" />
<van-action-bar-icon icon="cart-o" text="ショッピングカート" @click="onClickIcon" />
<van-action-bar-button type="warning" text="カートに追加" @click="onClickButton" />
<van-action-bar-button type="danger" text="即購入" @click="onClickButton" />
</van-action-bar>import { showToast } from 'vant';
export default {
setup() {
const onClickIcon = () => showToast('アイコンをクリック');
const onClickButton = () => showToast('ボタンをクリック');
return {
onClickIcon,
onClickButton,
};
},
};バッジ表示
ユーザーの注意を引きたいですか？ActionBarIcon コンポーネントに dot 属性を設定すると、アイコンの右上隅に目立つ赤い点が表示されます。badge 属性を設定すると、ショッピングカートの商品数など、具体的な数字やテキストを表示できます。
<van-action-bar>
<van-action-bar-icon icon="chat-o" text="カスタマーサービス" dot />
<van-action-bar-icon icon="cart-o" text="ショッピングカート" badge="5" />
<van-action-bar-icon icon="shop-o" text="ショップ" badge="12" />
<van-action-bar-button type="warning" text="カートに追加" />
<van-action-bar-button type="danger" text="即購入" />
</van-action-bar>アイコンの色をカスタマイズ
ActionBarIcon の color 属性でアイコンの色をカスタマイズし、アクションバーをブランドの色彩に合わせることができます。
<van-action-bar>
<van-action-bar-icon icon="chat-o" text="カスタマーサービス" color="#ee0a24" />
<van-action-bar-icon icon="cart-o" text="ショッピングカート" />
<van-action-bar-button type="warning" text="カートに追加" />
<van-action-bar-button type="danger" text="即購入" />
</van-action-bar>ボタンの色をカスタマイズ
ActionBarButton の color 属性でボタンの色をカスタマイズでき、linear-gradient グラデーションカラーもサポートされているため、ボタンをより魅力的にすることができます！
API
ActionBar Props
| パラメータ | 説明 | 型 | デフォルト値 |
|---|---|---|---|
| safe-area-inset-bottom | 下部安全エリア対応を有効にするかどうか | boolean | true |
| placeholder | タグ位置に同じ高さのプレースホルダー要素を生成するかどうか | boolean | false |
ActionBarIcon Props
| パラメータ | 説明 | 型 | デフォルト値 |
|---|---|---|---|
| text | ボタンのテキスト | string | - |
| icon | アイコン | string | - |
| color | アイコンの色 | string | #323233 |
| icon-class | アイコンの追加クラス名 | string | Array | object | - | | icon-prefix | アイコンクラス名のプレフィックス。Icon コンポーネントの class-prefix 属性 と同じ | string | van-icon |
| dot | アイコンの右上隅に赤い点を表示するかどうか | boolean | false | | badge | アイコン右上隅のバッジの内容 | number | string | - | | badge-props | バッジのカスタムプロパティ。渡されたオブジェクトは Badge コンポーネントの props に渡されます | BadgeProps | - |
| url | クリック後にジャンプするリンク先 | string | - | | to | クリック後にジャンプするターゲットルートオブジェクト。Vue Router の to 属性 と同じ | string | object | - |
| replace | ジャンプ時に現在のページ履歴を置き換えるかどうか | boolean | false |
ActionBarButton Props
| パラメータ | 説明 | 型 | デフォルト値 |
|---|---|---|---|
| text | ボタンのテキスト | string | - |
| type | ボタンのタイプ。default、primary、success、warning、danger から選択可能 | string | default |
| color | ボタンの色。linear-gradient グラデーションカラーの指定もサポート | string | - |
| icon | 左側のアイコン名または画像リンク。Icon コンポーネントの name 属性 と同じ | string | - |
| disabled | ボタンを無効にするかどうか | boolean | false | | loading | 読み込み状態として表示するかどうか | boolean | false | | url | クリック後にジャンプするリンク先 | string | - | | to | クリック後にジャンプするターゲットルートオブジェクト。Vue Router の to 属性 と同じ | string | object | - |
| replace | ジャンプ時に現在のページ履歴を置き換えるかどうか | boolean | false |
ActionBarIcon Slots
| 名前 | 説明 |
|---|---|
| default | テキストコンテンツ |
| icon | カスタムアイコン |
ActionBarButton Slots
| 名前 | 説明 |
|---|---|
| default | ボタンに表示される内容 |
型定義
コンポーネントは以下の型定義をエクスポートします：
import type { ActionBarProps, ActionBarIconProps, ActionBarButtonProps } from 'vant';テーマカスタマイズ
スタイル変数
コンポーネントはカスタマイズに使用できる以下の CSS 変数を提供します。使用方法については ConfigProvider コンポーネント を参照してください。
| 名前 | デフォルト値 | 説明 |
|---|---|---|
| --van-action-bar-background | var(--van-background-2) | - |
| --van-action-bar-height | 50px | - |
| --van-action-bar-icon-width | 48px | - |
| --van-action-bar-icon-height | 100% | - |
| --van-action-bar-icon-color | var(--van-text-color) | - |
| --van-action-bar-icon-size | 18px | - |
| --van-action-bar-icon-font-size | var(--van-font-size-xs) | - |
| --van-action-bar-icon-active-color | var(--van-active-color) | - |
| --van-action-bar-icon-text-color | var(--van-text-color) | - |
| --van-action-bar-icon-background | var(--van-background-2) | - |
| --van-action-bar-button-height | 40px | - |
| --van-action-bar-button-warning-color | var(--van-gradient-orange) | - |
| --van-action-bar-button-danger-color | var(--van-gradient-red) | - |
🎉 まとめ
ActionBar アクションバーはモバイルアプリの黄金の相棒です！便利な操作エントリーポイントを提供するだけでなく、バッジ表示、カスタムカラーなどの機能によって、アプリをより生き生きと魅力的にすることができます。EC ショッピング、SNS シェア、その他のビジネスシナリオでも、ActionBar は優れたユーザーエクスペリエンスを実現するのに役立ちます。
📚 関連コンテンツ
さらに詳しく知りたいですか？以下のコンテンツが役立つかもしれません：
- 🚀 クイックスタート - ゼロから始める Vant の使い方
- 🎨 テーマカスタマイズ - あなただけの視覚スタイルを作成
- 📱 モバイル対応 - 様々なデバイスでアプリを完璧に表示
- 🔘 Button ボタン - ボタンコンポーネントの基本的な使い方を理解
- 🏷️ Badge バッジ - バッジコンポーネントの使い方を学ぶ
- 🎨 Icon アイコン - アイコンコンポーネントの豊富な機能を探索
- 📋 ベストプラクティス - 開発におけるベストプラクティスを学ぶ
- 🔍 よくある質問 - 開発中の疑問をすばやく解決