ActionSheet action panel

introduce

A modal panel that pops up at the bottom, containing multiple options related to the current situation.

Code Demo

Basic usage

The action panel defines options through the actions attribute. The actions attribute is an array composed of objects. Each object in the array is configured with a column. For the object format, see the table at the bottom of the document.

<z-cell is-link title="Basic usage" @click="show = true" />
<z-action-sheet v-model:show="show" :actions="actions" @select="onSelect" />
import { ref, computed } from 'vue'
import { useToast } from '../../uni_modules/zebra-ui'
const toast = useToast()
const show = ref(false);
const actions = [
   { name: 'Option 1' },
   { name: 'Option 2' },
   { name: 'Option 3' },
];
const onSelect = (item) => {
   // By default, options will not automatically collapse when clicked
   // Automatic collapse can be enabled through the close-on-click-action attribute
   show.value = false;
   toast.showToast(item.name);
};

Show cancel button

After setting the cancel-text property, a cancel button will be displayed at the bottom. After clicking, the current panel will be closed and the cancel event will be triggered.

<z-action-sheet
   v-model:show="show"
   :actions="actions"
   cancel-text="Cancel"
   close-on-click-action
   @cancel="onCancel"
/>
const onCancel = () => toast.showToast('Cancel')

Display description information

The description information can be displayed at the top of the menu through description, and the description information can be displayed to the right of the option text through the subname attribute of the option.

<z-action-sheet
   v-model:show="show"
   :actions="actions"
   cancel-text="Cancel"
   description="This is a description message"
   close-on-click-action
/>
import { ref } from 'vue';
const actions = [
   { name: 'Option 1' },
   { name: 'Option 2' },
   { name: 'Option 3', subname: 'Description information' },
];

Option status

You can set options to the loading state or disabled state through loading and disabled, or set the color of the option through color

<z-action-sheet
   v-model:show="show"
   :actions="actions"
   cancel-text="Cancel"
   close-on-click-action
/>
import { ref } from 'vue';
const actions = [
   { name: 'Coloring options', color: '#ee0a24' },
   { name: 'Disable option', disabled: true },
   { name: 'Loading options', loading: true },
];

Custom panel

The display content of the panel can be customized through the slot, and the title bar can be displayed using the title attribute.

<z-action-sheet v-model:show="showTitle" title="title">
   <view class="demo-action-sheet-content">Content</view>
</z-action-sheet>

<style>
.demo-action-sheet {
   &-content {
     padding: var(--z-padding-md) var(--z-padding-md)
       calc(var(--z-padding-md) * 10);
   }
}
</style>

API

Props

ParametersDescriptionTypeDefault value
v-model:showWhether to display the action panelbooleanfalse
actionsPanel option listActionSheetAction[]
titletop titlestring-
cancel-textCancel button textstring-
descriptionDescription information above the optionstring-
closeableWhether to display the close iconbooleantrue
close-iconClose the icon name or image link, which is equivalent to the name attribute of the Icon componentstringclose
durationanimation duration in milliseconds, set to 0 to disable animationnumber | string300
z-indexSet the z-index level of the panel to a fixed valuenumber | string2000+
roundWhether to display rounded cornersbooleantrue
overlaywhether to display the mask layerbooleantrue
overlay-classCustom mask layer class namestring | Array | object-
overlay-styleCustom mask layer styleobject-
lock-scrollWhether to lock background scrollingbooleantrue
close-on-click-actionWhether to close the option after clicking itbooleanfalse
close-on-click-overlayWhether to close the overlay after clicking itbooleantrue
safe-area-inset-bottomWhether to enable bottom safe area adaptationbooleantrue
before-closeCallback function before closing, return false to prevent closing, support returning Promise(action: string) => boolean | Promise<boolean>-

Action data structure

The actions property is an array of objects. Each object in the array is configured with a column. The objects can contain the following values:

Key nameDescriptionType
nametitlestring
subnameSecondary titlestring
coloroption text colorstring
classNameAdd additional class for the corresponding columnstring | Array | object
loadingwhether it is loading stateboolean
disabledWhether it is disabledboolean
callbackCallback function triggered when clickedaction: ActionSheetAction

Events

Event nameDescriptionCallback parameters
selectTriggered when an option is clicked, not triggered when disabled or loadedaction: ActionSheetAction, index: number
cancelTriggered when the cancel button is clicked-
openTriggered when the panel is opened-
closeTriggered when closing the panel-
openedTriggered after the panel is opened and the animation ends-
closedTriggered after the panel is closed and the animation ends-
click-overlayTriggered when the overlay layer is clickedevent: MouseEvent

Slots

NameDescriptionParameters
defaultCustomize the display content of the panel-
descriptionCustom description copy-
cancelCustomize cancel button content-
actionCustom option content{ action: ActionSheetAction, index: number }

Theme customization

Style variables

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

NameDefaultDescription
--z-action-sheet-max-height80%-
--z-action-sheet-header-height96rpx-
--z-action-sheet-header-font-sizevar(--z-font-size-lg)-
--z-action-sheet-description-colorvar(--z-text-color-2)-
--z-action-sheet-description-font-sizevar(--z-font-size-md)-
--z-action-sheet-description-line-heightvar(--z-line-height-md)-
--z-action-sheet-item-backgroundvar(--z-background-2)-
--z-action-sheet-item-font-sizevar(--z-font-size-lg)-
--z-action-sheet-item-line-heightvar(--z-line-height-lg)-
--z-action-sheet-item-text-colorvar(--z-text-color)-
--z-action-sheet-item-disabled-text-colorvar(--z-text-color-3)-
--z-action-sheet-subname-colorvar(--z-text-color-2)-
--z-action-sheet-subname-font-sizevar(--z-font-size-sm)-
--z-action-sheet-subname-line-heightvar(--z-line-height-sm)-
--z-action-sheet-close-icon-size44rpx-
--z-action-sheet-close-icon-colorvar(--z-gray-5)-
--z-action-sheet-close-icon-padding0 var(--z-padding-md)-
--z-action-sheet-cancel-text-colorvar(--z-gray-7)-
--z-action-sheet-cancel-padding-topvar(--z-padding-xs)-
--z-action-sheet-cancel-padding-colorvar(--z-background)-
--z-action-sheet-loading-icon-size44rpx-