PopupMenuButton

Displays a menu when pressed and calls onSelected when the menu is dismissed because an item was selected.

Usage

Use PopupMenuButton to show a list of options in a popup menu.

iOS Style(Default)

Material

Code Example

<script setup lang="ts">
import {
  Center,
  Colors,
  Column,
  Container,
  ListTile,
  PopupMenuButton,
  Text,
  Row,
  SizedBox,
  TextStyle,
  FontWeight,
  Offset,
} from "fluekit";
// import { Offset } from "fluekit/src/Offset.js";

const handleSelect = (value: string, close: () => void) => {
  console.log("Selected:", value);
  close();
};
</script>

<template>
  <Container height="300" :border="{ width: 1, color: '#eee' }">
    <Center>
      <Row mainAxisAlignment="spaceEvenly" crossAxisAlignment="center">
        <!-- iOS Variant -->
        <Column mainAxisSize="min" crossAxisAlignment="center">
          <Text :style="TextStyle({ fontWeight: FontWeight.bold })">iOS Style(Default)</Text>
          <SizedBox :height="10" />
          <PopupMenuButton variant="ios" :offset="Offset(19, 0)">
            <template #default="{ close }">
              <Container width="180">
                <Column>
                  <ListTile title="Share" @tap="handleSelect('share', close)" />
                  <ListTile title="Edit" @tap="handleSelect('edit', close)" />
                  <ListTile
                    title="Delete"
                    :textStyle="TextStyle({ color: 'red' })"
                    @tap="handleSelect('delete', close)"
                  />
                </Column>
              </Container>
            </template>
          </PopupMenuButton>
        </Column>
        <SizedBox :width="40" />
        <!-- Material Variant -->
        <Column mainAxisSize="min" crossAxisAlignment="center">
          <Text :style="TextStyle({ fontWeight: FontWeight.bold })">Material </Text>
          <SizedBox :height="10" />
          <PopupMenuButton>
            <template #default="{ close }">
              <Container width="150" :color="Colors.white">
                <Column>
                  <ListTile title="Option 1" @tap="handleSelect('1', close)" />
                  <ListTile title="Option 2" @tap="handleSelect('2', close)" />
                  <ListTile title="Option 3" @tap="handleSelect('3', close)" />
                </Column>
              </Container>
            </template>
          </PopupMenuButton>
        </Column>
      </Row>
    </Center>
  </Container>
</template>

Props

Prop	Type	Default	Description
icon	Component	MoreVertIcon	The icon to display in the button.
iconSize	number	24	The size of the icon.
iconColor	string | Color	-	The color of the icon.
color	string | Color	Colors.white	The background color of the menu.
elevation	number	8	The z-coordinate at which to place this menu.
offset	{x: number, y: number}	{x: 0, y: 0}	The offset applied to the menu position.
variant	'material' | 'ios'	'ios'	The visual style of the popup menu.

Slots

Name	Scope	Description
default	{ close: () => void }	The content of the menu. Use the close function to dismiss the menu.