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
Parameters | Description | Type | Default value |
---|---|---|---|
v-model:show | Whether to display the action panel | boolean | false |
actions | Panel option list | ActionSheetAction | [] |
title | top title | string | - |
cancel-text | Cancel button text | string | - |
description | Description information above the option | string | - |
closeable | Whether to display the close icon | boolean | true |
close-icon | Close the icon name or image link, which is equivalent to the name attribute of the Icon component | string | close |
duration | animation duration in milliseconds, set to 0 to disable animation | number | string | 300 |
z-index | Set the z-index level of the panel to a fixed value | number | string | 2000+ |
round | Whether to display rounded corners | boolean | true |
overlay | whether to display the mask layer | boolean | true |
overlay-class | Custom mask layer class name | string | Array | object | - |
overlay-style | Custom mask layer style | object | - |
lock-scroll | Whether to lock background scrolling | boolean | true |
close-on-click-action | Whether to close the option after clicking it | boolean | false |
close-on-click-overlay | Whether to close the overlay after clicking it | boolean | true |
safe-area-inset-bottom | Whether to enable bottom safe area adaptation | boolean | true |
before-close | Callback 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 name | Description | Type |
---|---|---|
name | title | string |
subname | Secondary title | string |
color | option text color | string |
className | Add additional class for the corresponding column | string | Array | object |
loading | whether it is loading state | boolean |
disabled | Whether it is disabled | boolean |
callback | Callback function triggered when clicked | action: ActionSheetAction |
Events
Event name | Description | Callback parameters |
---|---|---|
select | Triggered when an option is clicked, not triggered when disabled or loaded | action: ActionSheetAction, index: number |
cancel | Triggered when the cancel button is clicked | - |
open | Triggered when the panel is opened | - |
close | Triggered when closing the panel | - |
opened | Triggered after the panel is opened and the animation ends | - |
closed | Triggered after the panel is closed and the animation ends | - |
click-overlay | Triggered when the overlay layer is clicked | event: MouseEvent |
Slots
Name | Description | Parameters |
---|---|---|
default | Customize the display content of the panel | - |
description | Custom description copy | - |
cancel | Customize cancel button content | - |
action | Custom 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.
Name | Default | Description |
---|---|---|
--z-action-sheet-max-height | 80% | - |
--z-action-sheet-header-height | 96rpx | - |
--z-action-sheet-header-font-size | var(--z-font-size-lg) | - |
--z-action-sheet-description-color | var(--z-text-color-2) | - |
--z-action-sheet-description-font-size | var(--z-font-size-md) | - |
--z-action-sheet-description-line-height | var(--z-line-height-md) | - |
--z-action-sheet-item-background | var(--z-background-2) | - |
--z-action-sheet-item-font-size | var(--z-font-size-lg) | - |
--z-action-sheet-item-line-height | var(--z-line-height-lg) | - |
--z-action-sheet-item-text-color | var(--z-text-color) | - |
--z-action-sheet-item-disabled-text-color | var(--z-text-color-3) | - |
--z-action-sheet-subname-color | var(--z-text-color-2) | - |
--z-action-sheet-subname-font-size | var(--z-font-size-sm) | - |
--z-action-sheet-subname-line-height | var(--z-line-height-sm) | - |
--z-action-sheet-close-icon-size | 44rpx | - |
--z-action-sheet-close-icon-color | var(--z-gray-5) | - |
--z-action-sheet-close-icon-padding | 0 var(--z-padding-md) | - |
--z-action-sheet-cancel-text-color | var(--z-gray-7) | - |
--z-action-sheet-cancel-padding-top | var(--z-padding-xs) | - |
--z-action-sheet-cancel-padding-color | var(--z-background) | - |
--z-action-sheet-loading-icon-size | 44rpx | - |