ActionSheet アクションシート - Vant 4
ActionSheet アクションシート
📋 紹介
アクションシートはエレガントなインタラクティブコンポーネントです！画面下部から表示され、現在の状況に関連する複数のオプションをユーザーに提供します。シェア、編集、削除などの操作にかかわらず、アクションシートによってユーザーは素早く選択を行い、スムーズな操作体験を得ることができます。
📦 導入
以下の方法でグローバルにコンポーネントを登録します。詳細な登録方法についてはコンポーネント登録を参照してください。
js
import { createApp } from 'vue';
import { ActionSheet } from 'vant';
const app = createApp();
app.use(ActionSheet);🎯 コードデモ
基本的な使い方
アクションシートは actions 属性でオプションを定義します。actions 属性はオブジェクトからなる配列で、配列内の各オブジェクトが1列を設定します。オブジェクトのフォーマットについては、ドキュメント下部の表を参照してください。簡単な設定で、機能の完全なアクションシートを実装できます！
js
import { ref } from 'vue';
import { showToast } from 'vant';
export default {
setup() {
const show = ref(false);
const actions = [ { name: 'オプション1' }, { name: 'オプション2' }, { name: 'オプション3' }, ];
const onSelect = (item) => {
// デフォルトでは、オプションをクリックしても自動的に閉じません
// close-on-click-action 属性で自動的に閉じるように設定できます
show.value = false;
showToast(item.name);
};
return { show, actions, onSelect, };
},
};アイコンの表示
actions の icon フィールドを使用すると、オプションにアイコンを設定でき、オプションがより直感的になります！
js
import { ref } from 'vue';
import { showToast } from 'vant';
export default {
setup() {
const show = ref(false);
const actions = [ { name: 'オプション1', icon: 'cart-o' }, { name: 'オプション2', icon: 'shop-o' }, { name: 'オプション3', icon: 'star-o' }, ];
const onSelect = (item) => {
show.value = false;
showToast(item.name);
};
return { show, actions, onSelect };
};
};キャンセルボタンの表示
cancel-text 属性を設定すると、下部にキャンセルボタンが表示され、クリックすると現在のパネルが閉じられ、cancel イベントがトリガーされます。
js
import { ref } from 'vue';
import { showToast } from 'vant';
export default {
setup() {
const show = ref(false);
const actions = [ { name: 'オプション1' }, { name: 'オプション2' }, { name: 'オプション3' }, ];
const onCancel = () => showToast('キャンセル');
return { show, actions, onCancel };
}
};説明情報の表示
description を使用すると、メニューの上部に説明情報を表示できます。また、オプションの subname 属性を使用すると、オプションテキストの右側に説明情報を表示できます。
js
import { ref } from 'vue';
export default {
setup() {
const show = ref(false);
const actions = [ { name: 'オプション1' }, { name: 'オプション2' }, { name: 'オプション3', subname: '説明情報' }, ];
const onSelect = (item) => {
show.value = false;
showToast(item.name);
};
return { show, actions, onSelect, };
}
};オプションの状態
loading と disabled を使用して、オプションを読み込み状態または無効状態に設定するか、color でオプションの色を設定できます。
js
import { ref } from 'vue';
export default {
setup() {
const show = ref(false);
const actions = [ { name: '色付きオプション', color: '#ee0a24' }, { name: '無効オプション', disabled: true }, { name: '読み込み中オプション', loading: true }, ];
const onSelect = (item) => {
show.value = false;
showToast(item.name);
};
return { show, actions, onSelect, };
}
};カスタムパネル
スロットを使用してパネルの表示内容をカスタマイズでき、title 属性を使用してタイトルバーを表示できます。
API
Props
| パラメータ | 説明 | 型 | デフォルト値 |
|---|---|---|---|
| v-model:show | アクションシートを表示するかどうか | boolean | false |
| actions | パネルオプションリスト | ActionSheetAction[] | [] |
| title | 上部のタイトル | string | - |
| cancel-text | キャンセルボタンのテキスト | string | - |
| description | オプションの上の説明情報 | string | - |
| closeable | 閉じるアイコンを表示するかどうか | boolean | true |
| close-icon | 閉じるアイコン名または画像リンク。Icon コンポーネントの name 属性 と同じ | string | cross |
| duration | アニメーションの期間（秒）。0 に設定するとアニメーションを無効にできます | number | string | 0.3 |
| z-index | パネルの z-index レベルを固定値に設定します | number | string | 2000+ |
| round | 角丸を表示するかどうか | boolean | true |
| overlay | マスクレイヤーを表示するかどうか | boolean | true |
| overlay-class | カスタムマスクレイヤーのクラス名 | string | Array | object | - |
| overlay-style | カスタムマスクレイヤーのスタイル | object | - |
| lock-scroll | 背景のスクロールをロックするかどうか | boolean | true |
| lazy-render | ポップアップが表示されたときにのみノードをレンダリングするかどうか | boolean | true |
| close-on-popstate | ページが戻るときに自動的に閉じるかどうか | boolean | true |
| close-on-click-action | オプションをクリックした後に閉じるかどうか | boolean | false |
| close-on-click-overlay | マスクレイヤーをクリックした後に閉じるかどうか | boolean | true |
| safe-area-inset-bottom | 下部安全エリア対応を有効にするかどうか | boolean | true |
| teleport | マウントするノードを指定します。Teleport コンポーネントの to 属性 と同じ | string | Element | - |
| before-close | 閉じる前のコールバック関数。false を返すと閉じるのを阻止できます。Promise の返しもサポートします | (action: string) => boolean | Promise<boolean> | - |
Action データ構造
actions 属性はオブジェクトからなる配列で、配列内の各オブジェクトが1列を設定します。オブジェクトには以下の値を含めることができます：
| キー名 | 説明 | 型 |
|---|---|---|
| name | タイトル | string |
| subname | サブタイトル | string |
| color | オプションのテキストの色 | string |
icon v4.8.6 | オプションのアイコン名または画像リンク | string |
| className | 対応する列に追加の class を追加する | string | Array | object |
| loading | 読み込み状態かどうか | boolean |
| disabled | 無効状態かどうか | boolean |
| callback | クリック時にトリガーされるコールバック関数 | action: ActionSheetAction |
Events
| イベント名 | 説明 | コールバック引数 |
|---|---|---|
| select | オプションをクリックしたときにトリガーされます。無効または読み込み状態ではトリガーされません | action: ActionSheetAction, index: number |
| cancel | キャンセルボタンをクリックしたときにトリガーされます | - |
| open | パネルを開くときにトリガーされます | - |
| close | パネルを閉じるときにトリガーされます | - |
| opened | パネルを開いてアニメーションが終了した後にトリガーされます | - |
| closed | パネルを閉じてアニメーションが終了した後にトリガーされます | - |
| click-overlay | マスクレイヤーをクリックしたときにトリガーされます | event: MouseEvent |
Slots
| 名前 | 説明 | パラメータ |
|---|---|---|
| default | パネルの表示内容をカスタマイズする | - |
| description | 説明テキストをカスタマイズする | - |
| cancel | キャンセルボタンの内容をカスタマイズする | - |
| action | オプションの内容をカスタマイズする | { action: ActionSheetAction, index: number } |
型定義
コンポーネントは以下の型定義をエクスポートします：
ts
import type { ActionSheetProps, ActionSheetAction } from 'vant';テーマカスタマイズ
スタイル変数
コンポーネントはカスタマイズに使用できる以下の CSS 変数を提供します。使用方法については ConfigProvider コンポーネント を参照してください。
| 名前 | デフォルト値 | 説明 |
|---|---|---|
| --van-action-sheet-max-height | 80% | - |
| --van-action-sheet-header-height | 48px | - |
| --van-action-sheet-header-font-size | var(--van-font-size-lg) | - |
| --van-action-sheet-description-color | var(--van-text-color-2) | - |
| --van-action-sheet-description-font-size | var(--van-font-size-md) | - |
| --van-action-sheet-description-line-height | var(--van-line-height-md) | - |
| --van-action-sheet-item-background | var(--van-background-2) | - |
| --van-action-sheet-item-font-size | var(--van-font-size-lg) | - |
| --van-action-sheet-item-line-height | var(--van-line-height-lg) | - |
| --van-action-sheet-item-text-color | var(--van-text-color) | - |
| --van-action-sheet-item-disabled-text-color | var(--van-text-color-3) | - |
| --van-action-sheet-item-icon-size | 18px | - |
| --van-action-sheet-item-icon-margin-right | var(--van-padding-xs) | - |
| --van-action-sheet-subname-color | var(--van-text-color-2) | - |
| --van-action-sheet-subname-font-size | var(--van-font-size-sm) | - |
| --van-action-sheet-subname-line-height | var(--van-line-height-sm) | - |
| --van-action-sheet-close-icon-size | 22px | - |
| --van-action-sheet-close-icon-color | var(--van-gray-5) | - |
| --van-action-sheet-close-icon-padding | 0 var(--van-padding-md) | - |
| --van-action-sheet-cancel-text-color | var(--van-gray-7) | - |
| --van-action-sheet-cancel-padding-top | var(--van-padding-xs) | - |
| --van-action-sheet-cancel-padding-color | var(--van-background) | - |
| --van-action-sheet-loading-icon-size | 22px | - |
🎉 まとめ
ActionSheet アクションシートはモバイルインタラクションのスターコンポーネントです！エレガントに下部から表示され、ユーザーに明確な選択インターフェイスを提供します。シンプルなオプションリストでも、アイコンや説明のある複雑なパネルでも、ActionSheet は簡単に対応し、アプリのインタラクションをよりスムーズで自然なものにすることができます。
📚 関連コンテンツ
さらに詳しく知りたいですか？以下のコンテンツが役立つかもしれません：
- 🚀 クイックスタート - ゼロから始める Vant の使い方
- 🎨 テーマカスタマイズ - あなただけの視覚スタイルを作成
- 📱 モバイル対応 - 様々なデバイスでアプリを完璧に表示
- 🔧 高度な使い方 - より多くの高度な機能とテクニックを解き放つ
- 🎯 ActionBar アクションバー - 下部アクションバーの使い方を理解する
- 🎪 Icon アイコン - 豊富なアイコンライブラリを探索する
- 🎭 Popup ポップアップ - ポップアップコンポーネントの使い方をマスターする
- 🎨 Overlay マスクレイヤー - マスクレイヤーのアプリケーションシナリオを学ぶ
- 📋 ベストプラクティス - 開発におけるベストプラクティスを学ぶ
- 🔍 よくある質問 - 開発中の疑問をすばやく解決
- 💬 お問い合わせ - 問題が発生しましたか？いつでもお手伝いいたします