vant/packages/vant/src/action-sheet/README.md

ActionSheet

Intro

The pop-up modal panel at the bottom contains multiple options related to the current situation.

Install

Register component globally via app.use, refer to Component Registration for more registration ways.

import { createApp } from 'vue';
import { ActionSheet } from 'vant';

const app = createApp();
app.use(ActionSheet);

Usage

Basic Usage

Use actions prop to set options of action-sheet.

<van-cell is-link title="Basic Usage" @click="show = true" />
<van-action-sheet v-model:show="show" :actions="actions" @select="onSelect" />

import { ref } from 'vue';
import { Toast } from 'vant';

export default {
  setup() {
    const show = ref(false);
    const actions = [
      { name: 'Option 1' },
      { name: 'Option 2' },
      { name: 'Option 3' },
    ];
    const onSelect = (item) => {
      show.value = false;
      Toast(item.name);
    };

    return {
      show,
      actions,
      onSelect,
    };
  },
};

Show Cancel Button

<van-action-sheet
  v-model:show="show"
  :actions="actions"
  cancel-text="Cancel"
  close-on-click-action
  @cancel="onCancel"
/>

import { ref } from 'vue';
import { Toast } from 'vant';

export default {
  setup() {
    const show = ref(false);
    const actions = [
      { name: 'Option 1' },
      { name: 'Option 2' },
      { name: 'Option 3' },
    ];
    const onCancel = () => Toast('cancel');

    return {
      show,
      actions,
      onCancel,
    };
  },
};

Show Description

<van-action-sheet
  v-model:show="show"
  :actions="actions"
  cancel-text="Cancel"
  description="Description"
  close-on-click-action
/>

import { ref } from 'vue';

export default {
  setup() {
    const show = ref(false);
    const actions = [
      { name: 'Option 1' },
      { name: 'Option 2' },
      { name: 'Option 3', subname: 'Description' },
    ];

    return {
      show,
      actions,
    };
  },
};

Option Status

<van-action-sheet
  v-model:show="show"
  :actions="actions"
  cancel-text="Cancel"
  close-on-click-action
/>

import { ref } from 'vue';

export default {
  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

<van-action-sheet v-model:show="show" title="Title">
  <div class="content">Content</div>
</van-action-sheet>

<style>
  .content {
    padding: 16px 16px 160px;
  }
</style>

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	0.3
round	Whether to show round corner	boolean	true
overlay	Whether to show overlay	boolean	true
overlay-class	Custom overlay class	string | Array | object	-
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 v3.1.4	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
className	className for the option	string | Array | object
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 v3.0.10	Custom the content of cancel button
option v3.3.8	Custom the content of option	{ action: Action, index: number }

Types

The component exports the following type definitions:

import type { 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-color-light)	-
--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-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-color)	-
--van-action-sheet-loading-icon-size	22px	-