vant/src/action-sheet

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	Action[]	[]
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	false
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 Action

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: Action

Events

Event	Description	Arguments
select	Emitted when an option is clicked	action: Action, 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
default	Custom content
description	Custom description above the options
cancel v3.0.10	Custom the content of cancel button

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-gray-6)	-
--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-white)	-
--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-gray-5)	-
--van-action-sheet-subname-color	var(--van-gray-6)	-
--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-active-color	var(--van-gray-6)	-
--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	-