ActionSheet action panel

introduce

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

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>

Props

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:

Events

Slots

Style variables

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