CupertinoContextMenu

An iOS-style full-screen modal menu that opens on long press.

It provides a blur backdrop and a list of actions, similar to the context menus found in iOS applications.

Usage

Long Press Me

<template>
  <div
    class="demo-container"
    style="height: 300px; display: flex; align-items: center; justify-content: center"
  >
    <CupertinoContextMenu :actions="actions">
      <Container
        :width="100"
        :height="100"
        color="#007AFF"
        :border-radius="BorderRadius.circular(12)"
        alignment="center"
      >
        <Text :style="TextStyle({ color: 'white', fontWeight: FontWeight.w600 })"
          >Long Press Me</Text
        >
      </Container>
    </CupertinoContextMenu>
  </div>
</template>

<script setup lang="ts">
import {
  CupertinoContextMenu,
  Container,
  Text,
  BorderRadius,
  TextStyle,
  FontWeight,
} from "fluekit";

const actions = [
  {
    child: "Action One",
    onPressed: () => alert("Action One Pressed"),
    icon: { template: "<span>★</span>" },
  },
  {
    child: "Action Two",
    onPressed: () => alert("Action Two Pressed"),
  },
  {
    child: "Delete",
    isDestructiveAction: true,
    onPressed: () => alert("Delete Pressed"),
    icon: { template: "<span>🗑️</span>" },
  },
];
</script>

API

Props

Name	Type	Default	Description
actions	ContextMenuAction[]	[]	The list of actions to display in the menu.

ContextMenuAction

Property	Type	Description
child	string	The text label for the action.
isDefaultAction	boolean	Whether this action is the default action (bold text).
isDestructiveAction	boolean	Whether this action is destructive (red text).
onPressed	() => void	Callback function when the action is selected.
icon	Component	Optional icon to display next to the text.

Slots

Name	Description
default	The content that triggers the context menu on long press.