ActionSheet

Action list in a bottom drawer

A short list of actions from the bottom of a phone screen — share, edit, delete. On wide screens a DropdownMenu next to the button fits better.

Basic

Episode 3

<script setup lang="ts">
import { ref } from "vue";
import { BlessActionSheet, BlessButton, useToast } from "blessing-ui";
const { toast } = useToast();
const open = ref(false);
const grid = ref(false);
const actions = [
  { label: "Share", value: "share", icon: "⇪", description: "Copy a link" },
  { label: "Download", value: "dl", icon: "⇩" },
  { label: "Rename", value: "rename", icon: "✎" },
  { label: "Delete", value: "del", icon: "×", danger: true },
];
</script>

<template>
  <div class="row">
    <BlessButton @click="((grid = false), (open = true))">List sheet</BlessButton>
    <BlessButton variant="outline" @click="((grid = true), (open = true))">Grid sheet</BlessButton>
    <BlessActionSheet
      v-model:open="open"
      :actions
      :grid
      title="Episode 3"
      @select="toast($event.label)"
      @cancel="toast('Cancelled')"
    />
  </div>
</template>

• A Drawer holding buttons: Esc, the backdrop and Cancel close it. @select fires for a chosen action and @cancel only when it was dismissed without one.
• danger marks destructive actions; grid lays icons out in a grid; cancel (default) adds the Cancel row.

Usage

import { BlessActionSheet } from "blessing-ui";

API

Props

Name	Type	Default	Description
actions*	BlessAction[]	—
title	string	—
grid	boolean	—	icon grid instead of a list
cancelLabel	string	"Cancel"
cancel	boolean	true	show a cancel row at the bottom
open	boolean	false

Events

Name	Payload	Description
update:open	[value: boolean]
cancel	[]
select	[action: BlessAction]