ActionSheet - Vant 4

ActionSheet

📋 Present choices beautifully with smooth bottom-up action sheets!

Intro

ActionSheet is your elegant solution for presenting contextual options to users! This sleek bottom-sliding panel creates an intuitive way to offer multiple choices without cluttering your interface. Perfect for sharing options, selection menus, or any scenario where you need to present actions in a clean, mobile-friendly way! 🎯✨

Install

Ready to add some smooth sliding action to your app? Let's get ActionSheet registered and ready to impress your users! Use app.use() for global registration, or explore our Component Registration guide for more flexible options! 🚀

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

Usage

Basic Usage - Your First Action Sheet! 🎉

Creating an action sheet is as simple as passing an array of actions! Each option becomes a tappable choice that slides up beautifully from the bottom. Watch how easy it is to give users meaningful options!

import { ref } from'vue'; import { showToast } from'vant'; exportdefault { setup() { const show = ref(false); const actions = [ { name: 'Option 1' }, { name: 'Option 2' }, { name: 'Option 3' }, ]; constonSelect = (item) => { show.value = false; showToast(item.name); }; return { show, actions, onSelect, }; }, };

Show Icon - Visual Clarity! 🎨

Make your options instantly recognizable by adding icons! The icon field transforms plain text options into visually appealing choices that users can understand at a glance. Perfect for actions like share, save, or delete!

import { ref } from'vue'; import { showToast } from'vant'; exportdefault { setup() { const show = ref(false); const actions = [ { name: 'Option 1', icon: 'cart-o' }, { name: 'Option 2', icon: 'shop-o' }, { name: 'Option 3', icon: 'star-o' }, ]; constonSelect = (item) => { show.value = false; showToast(item.name); }; return { show, actions, onSelect, }; }, };

Show Cancel Button - Always Provide an Exit! 🚪

Give users a way out! Adding a cancel button ensures users never feel trapped in your action sheet. It's a simple addition that greatly improves user experience and follows mobile UI best practices.

import { ref } from'vue'; import { showToast } from'vant'; exportdefault { setup() { const show = ref(false); const actions = [ { name: 'Option 1' }, { name: 'Option 2' }, { name: 'Option 3' }, ]; constonCancel = () => showToast('cancel'); return { show, actions, onCancel, }; }, };

Show Description - Context is King! 📝

Help users make informed decisions by adding descriptions to your action sheet. Perfect for explaining what each action does or providing additional context about the current situation.

import { ref } from'vue'; exportdefault { setup() { const show = ref(false); const actions = [ { name: 'Option 1' }, { name: 'Option 2' }, { name: 'Option 3', subname: 'Description' }, ]; return { show, actions, }; }, };

Option Status - Smart State Management! ⚡

Control how your options behave with powerful status features! Color-code important actions, disable unavailable options, or show loading states for async operations. Your action sheet becomes truly interactive!

import { ref } from'vue'; exportdefault { setup() { const show = ref(false); const actions = [ { name: 'Colored Option', color: '#ee0a24' }, { name: 'Disabled Option', disabled: true }, { name: 'Loading Option', loading: true }, ]; return { show, actions, }; }, };

Custom Panel - Unleash Your Creativity! 🎨

Need something beyond standard options? Create completely custom content within your action sheet! Perfect for complex forms, rich media, or any unique interaction pattern your app requires.

API

Props

Attribute	Description	Type	Default
v-model:show	Whether to show ActionSheet	boolean	false
actions	Options	ActionSheetAction[]	[]
title	Title	string	-
cancel-text	Text of cancel button	string	-
description	Description above the options	string	-
closeable	Whether to show close icon	boolean	true
close-icon	Close icon name	string	cross
duration	Transition duration, unit second	*number	string*
z-index	Set the z-index to a fixed value	*number	string*
round	Whether to show round corner	boolean	true
overlay	Whether to show overlay	boolean	true
overlay-class	Custom overlay class	*string	Array
overlay-style	Custom overlay style	object	-
lock-scroll	Whether to lock background scroll	boolean	true
lazy-render	Whether to lazy render util appeared	boolean	true
close-on-popstate	Whether to close when popstate	boolean	true
close-on-click-action	Whether to close when an action is clicked	boolean	false
close-on-click-overlay	Whether to close when overlay is clicked	boolean	true
safe-area-inset-bottom	Whether to enable bottom safe area adaptation	boolean	true
teleport	Specifies a target element where ActionSheet will be mounted	*string	Element*
before-close	Callback function before close	*(action: string) => boolean	Promise<boolean>*

Data Structure of ActionSheetAction

Key	Description	Type
name	Title	string
subname	Subtitle	string
color	Text color	string
icon v4.8.6	Icon name or URL	string
className	className for the option	*string
loading	Whether to be loading status	boolean
disabled	Whether to be disabled	boolean
callback	Callback function after clicked	action: ActionSheetAction

Events

Event	Description	Arguments
select	Emitted when an option is clicked	action: ActionSheetAction, index: number
cancel	Emitted when the cancel button is clicked	-
open	Emitted when opening ActionSheet	-
close	Emitted when closing ActionSheet	-
opened	Emitted when ActionSheet is opened	-
closed	Emitted when ActionSheet is closed	-
click-overlay	Emitted when overlay is clicked	event: MouseEvent

Slots

Name	Description	SlotProps
default	Custom content
description	Custom description above the options
cancel	Custom the content of cancel button
action	Custom the content of action	{ action: ActionSheetAction, index: number }

Types

The component exports the following type definitions:

importtype { ActionSheetProps, ActionSheetAction } from'vant';

Theming

CSS Variables

The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.

Name	Default Value	Description
--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	-

Related Docs

Explore more components and features to enhance your mobile app experience:

• Popup - Learn about popup components and overlay patterns
• Dialog - Master dialog components for confirmations and alerts
• Toast - Discover toast notifications for user feedback
• Icon - Explore the complete icon library for your action items
• Button - Understand button components and interactions
• ConfigProvider - Customize themes and global configurations
• Advanced Usage - Component registration and advanced techniques
• Vant 4 Overview - Explore all Vant 4 features and components