/*! For license information please see 4788.ccf7d4bb.js.LICENSE.txt */ (self.webpackChunk=self.webpackChunk||[]).push([["4788"],{75030:function(n,s,t){"use strict";t.r(s);var a=t("80681");let e=["innerHTML"];s.default={setup:()=>({html:""}),render:()=>((0,a.wg)(),(0,a.iD)("div",{class:"van-doc-markdown-body",innerHTML:'

ActionSheet

\n

Intro

\n

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

\n

Install

\n

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

\n
import { createApp } from 'vue';\nimport { ActionSheet } from 'vant';\n\nconst app = createApp();\napp.use(ActionSheet);\n
\n

Usage

\n

Basic Usage

\n

Use actions prop to set options of action-sheet.

\n
<van-cell is-link title="Basic Usage" @click="show = true" />\n<van-action-sheet v-model:show="show" :actions="actions" @select="onSelect" />\n
\n
import { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n  setup() {\n    const show = ref(false);\n    const actions = [\n      { name: 'Option 1' },\n      { name: 'Option 2' },\n      { name: 'Option 3' },\n    ];\n    const onSelect = (item) => {\n      show.value = false;\n      showToast(item.name);\n    };\n\n    return {\n      show,\n      actions,\n      onSelect,\n    };\n  },\n};\n
\n

Show Icon

\n

Use the icon field of actions to set the icon for the option.

\n
<van-cell is-link title="Show Icon" @click="show = true" />\n<van-action-sheet v-model:show="show" :actions="actions" @select="onSelect" />\n
\n
import { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n  setup() {\n    const show = ref(false);\n    const actions = [\n      { name: 'Option 1', icon: 'cart-o' },\n      { name: 'Option 2', icon: 'shop-o' },\n      { name: 'Option 3', icon: 'star-o' },\n    ];\n    const onSelect = (item) => {\n      show.value = false;\n      showToast(item.name);\n    };\n\n    return {\n      show,\n      actions,\n      onSelect,\n    };\n  },\n};\n
\n

Show Cancel Button

\n
<van-action-sheet\n  v-model:show="show"\n  :actions="actions"\n  cancel-text="Cancel"\n  close-on-click-action\n  @cancel="onCancel"\n/>\n
\n
import { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n  setup() {\n    const show = ref(false);\n    const actions = [\n      { name: 'Option 1' },\n      { name: 'Option 2' },\n      { name: 'Option 3' },\n    ];\n    const onCancel = () => showToast('cancel');\n\n    return {\n      show,\n      actions,\n      onCancel,\n    };\n  },\n};\n
\n

Show Description

\n
<van-action-sheet\n  v-model:show="show"\n  :actions="actions"\n  cancel-text="Cancel"\n  description="Description"\n  close-on-click-action\n/>\n
\n
import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const show = ref(false);\n    const actions = [\n      { name: 'Option 1' },\n      { name: 'Option 2' },\n      { name: 'Option 3', subname: 'Description' },\n    ];\n\n    return {\n      show,\n      actions,\n    };\n  },\n};\n
\n

Option Status

\n
<van-action-sheet\n  v-model:show="show"\n  :actions="actions"\n  cancel-text="Cancel"\n  close-on-click-action\n/>\n
\n
import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const show = ref(false);\n    const actions = [\n      { name: 'Colored Option', color: '#ee0a24' },\n      { name: 'Disabled Option', disabled: true },\n      { name: 'Loading Option', loading: true },\n    ];\n\n    return {\n      show,\n      actions,\n    };\n  },\n};\n
\n

Custom Panel

\n
<van-action-sheet v-model:show="show" title="Title">\n  <div class="content">Content</div>\n</van-action-sheet>\n\n<style>\n  .content {\n    padding: 16px 16px 160px;\n  }\n</style>\n
\n

API

\n

Props

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AttributeDescriptionTypeDefault
v-model:showWhether to show ActionSheetbooleanfalse
actionsOptionsActionSheetAction[][]
titleTitlestring-
cancel-textText of cancel buttonstring-
descriptionDescription above the optionsstring-
closeableWhether to show close iconbooleantrue
close-iconClose icon namestringcross
durationTransition duration, unit secondnumber | string0.3
z-indexSet the z-index to a fixed valuenumber | string2000+
roundWhether to show round cornerbooleantrue
overlayWhether to show overlaybooleantrue
overlay-classCustom overlay classstring | Array | object-
overlay-styleCustom overlay styleobject-
lock-scrollWhether to lock background scrollbooleantrue
lazy-renderWhether to lazy render util appearedbooleantrue
close-on-popstateWhether to close when popstatebooleantrue
close-on-click-actionWhether to close when an action is clickedbooleanfalse
close-on-click-overlayWhether to close when overlay is clickedbooleantrue
safe-area-inset-bottomWhether to enable bottom safe area adaptationbooleantrue
teleportSpecifies a target element where ActionSheet will be mountedstring | Element-
before-closeCallback function before close(action: string) => boolean | Promise<boolean>-
\n

Data Structure of ActionSheetAction

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
KeyDescriptionType
nameTitlestring
subnameSubtitlestring
colorText colorstring
icon v4.8.6Icon name or URLstring
classNameclassName for the optionstring | Array | object
loadingWhether to be loading statusboolean
disabledWhether to be disabledboolean
callbackCallback function after clickedaction: ActionSheetAction
\n

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
EventDescriptionArguments
selectEmitted when an option is clickedaction: ActionSheetAction, index: number
cancelEmitted when the cancel button is clicked-
openEmitted when opening ActionSheet-
closeEmitted when closing ActionSheet-
openedEmitted when ActionSheet is opened-
closedEmitted when ActionSheet is closed-
click-overlayEmitted when overlay is clickedevent: MouseEvent
\n

Slots

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescriptionSlotProps
defaultCustom content
descriptionCustom description above the options
cancelCustom the content of cancel button
actionCustom the content of action{ action: ActionSheetAction, index: number }
\n

Types

\n

The component exports the following type definitions:

\n
import type { ActionSheetProps, ActionSheetAction } from 'vant';\n
\n

Theming

\n

CSS Variables

\n

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

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDefault ValueDescription
--van-action-sheet-max-height80%-
--van-action-sheet-header-height48px-
--van-action-sheet-header-font-sizevar(--van-font-size-lg)-
--van-action-sheet-description-colorvar(--van-text-color-2)-
--van-action-sheet-description-font-sizevar(--van-font-size-md)-
--van-action-sheet-description-line-heightvar(--van-line-height-md)-
--van-action-sheet-item-backgroundvar(--van-background-2)-
--van-action-sheet-item-font-sizevar(--van-font-size-lg)-
--van-action-sheet-item-line-heightvar(--van-line-height-lg)-
--van-action-sheet-item-text-colorvar(--van-text-color)-
--van-action-sheet-item-disabled-text-colorvar(--van-text-color-3)-
--van-action-sheet-item-icon-size18px-
--van-action-sheet-item-icon-margin-rightvar(--van-padding-xs)-
--van-action-sheet-subname-colorvar(--van-text-color-2)-
--van-action-sheet-subname-font-sizevar(--van-font-size-sm)-
--van-action-sheet-subname-line-heightvar(--van-line-height-sm)-
--van-action-sheet-close-icon-size22px-
--van-action-sheet-close-icon-colorvar(--van-gray-5)-
--van-action-sheet-close-icon-padding0 var(--van-padding-md)-
--van-action-sheet-cancel-text-colorvar(--van-gray-7)-
--van-action-sheet-cancel-padding-topvar(--van-padding-xs)-
--van-action-sheet-cancel-padding-colorvar(--van-background)-
--van-action-sheet-loading-icon-size22px-
\n
'},null,8,e))}}}]);