Drawer

A Material Design panel that slides in horizontally from the edge of a Scaffold to show navigation links in an application.

Usage

A Drawer is typically used with the Scaffold.drawer property. The child of the drawer is usually a ListView whose first child is a DrawerHeader (or a Container that simulates it).

Code Example

<script setup lang="ts">
import {
  Scaffold,
  AppBar,
  Drawer,
  Text,
  Center,
  Column,
  ListTile,
  Container,
  Colors,
  EdgeInsets,
  TextStyle,
  FontWeight,
} from "fluekit";

const handleItemClick = (item: string) => {
  console.log(`Clicked: ${item}`);
};
</script>

<template>
  <Container height="500" :border="{ width: 1, color: '#eee' }">
    <Scaffold>
      <template #appBar>
        <AppBar title="Drawer Demo" />
      </template>

      <template #drawer="{ open, close }">
        <Drawer :open="open" @close="close">
          <Column expanded>
            <Container
              height="200"
              :color="Colors.blue"
              :padding="EdgeInsets.all(16)"
              alignment="bottomLeft"
            >
              <Text
                :style="
                  TextStyle({ color: Colors.amber, fontSize: 24, fontWeight: FontWeight.bold })
                "
              >
                Fluekit Drawer
              </Text>
              <Text :style="TextStyle({ color: Colors.amber100.withOpacity(0.8), fontSize: 14 })">
                vue-flutter-kit
              </Text>
            </Container>

            <ListTile title="Home" @tap="handleItemClick('Home')" />
            <ListTile title="Profile" @tap="handleItemClick('Profile')" />
            <ListTile title="Settings" @tap="handleItemClick('Settings')" />
          </Column>
        </Drawer>
      </template>

      <Center>
        <Column mainAxisAlignment="center">
          <Text>Click the menu icon in AppBar</Text>
          <Text>or slide from left edge</Text>

          <!-- Note: In a real app, AppBar handles the drawer opening automatically if leading is not provided. 
                 But here we can also manually trigger it via injected methods if needed. -->
        </Column>
      </Center>
    </Scaffold>
  </Container>
</template>

Standalone Usage

Although typically used with Scaffold, you can use Drawer independently. The Drawer component handles its own overlay and transitions.

Standalone Drawer Example

<script setup lang="ts">
import {
  Colors,
  Column,
  Container,
  Drawer,
  EdgeInsets,
  ElevatedButton,
  ListTile,
  Stack,
  Text,
} from "fluekit";
import { ref } from "vue";

const isOpen = ref(false);

const toggleDrawer = () => {
  isOpen.value = !isOpen.value;
};

const closeDrawer = () => {
  isOpen.value = false;
};
</script>

<template>
  <Container height="400" :border="{ width: 1, color: '#eee' }" clipBehavior="hardEdge">
    <Stack fit="expand">
      <!-- Main Content -->
      <Column mainAxisAlignment="center" crossAxisAlignment="center">
        <Text>Standalone Drawer Example</Text>
        <ElevatedButton @pressed="toggleDrawer">
          {{ isOpen ? "Close Drawer" : "Open Drawer" }}
        </ElevatedButton>
      </Column>

      <!-- Drawer with internal Overlay -->
      <Drawer v-model:open="isOpen" :width="250" style="z-index: 20">
        <Column expanded>
          <Container
            height="150"
            :color="Colors.green"
            :padding="EdgeInsets.all(16)"
            alignment="bottomLeft"
          >
            Standalone
          </Container>
          <ListTile title="Item A" @tap="closeDrawer" />
          <ListTile title="Item B" @tap="closeDrawer" />
        </Column>
      </Drawer>
    </Stack>
  </Container>
</template>

<style scoped></style>

Props

Prop	Type	Default	Description
open	boolean	false	Controls the visibility of the drawer (v-model).
backgroundColor	string | Color	Colors.white	The background color of the drawer.
elevation	number	16	The z-coordinate at which to place this drawer relative to its parent.
width	number	304	The width of the drawer.
edge	'start' | 'end'	'start'	The edge from which the drawer slides in.
overlayColor	string | Color	rgba(0,0,0,0.5)	The color of the overlay background.

Events

Name	Description
update:open	Emitted when the drawer visibility changes (e.g., clicking overlay).
close	Emitted when the drawer is closed via overlay click.

Slots

Name	Description
default	The widget below this widget in the tree.