Returnless UI

Drawer ​

Drawers are used to display content that slides in from the side of the screen. They can be used to show additional information, settings, or actions without leaving the current page.

Props
open?:
boolean
Defaults to false
Whether the drawer is open.
Events
close:
[]

Usage ​

js
<script lang="ts" setup>
import {
  Button,
  Drawer,
  DrawerContent,
  DrawerDescription,
  DrawerHeader,
  DrawerTitle,
} from '@returnless/focus-ui';
import { ref } from "vue"; 

const drawerOpen = ref(false);
</script>

<template>
  <Button v-on:click="drawerOpen = true">
    Open Drawer
  </Button>
  <Drawer :open="drawerOpen" v-on:close="drawerOpen = false">
    <DrawerContent>
      <DrawerHeader>
        <DrawerTitle>Drawer title</DrawerTitle>
        <DrawerDescription>Drawer description</DrawerDescription>
      </DrawerHeader>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque laudantium minima minus nesciunt odio. Doloribus ea eveniet ipsam maxime minima numquam perferendis praesentium quas repellat voluptas. Consequuntur provident qui voluptate!</p>
    </DrawerContent>
  </Drawer>
</template>

Drawer with size "lg" ​

js
<script lang="ts" setup>
import {
  Button,
  Drawer,
  DrawerContent,
  DrawerDescription,
  DrawerHeader,
  DrawerTitle,
} from '@returnless/focus-ui';
import { ref } from "vue";
const drawerOpen = ref(false);
</script>

<template>
  <Button v-on:click="drawerOpen = true">
    Open Large Drawer
  </Button>
  <Drawer :open="drawerOpen" v-on:close="drawerOpen = false">
    <DrawerContent size="lg">
      <DrawerHeader>
        <DrawerTitle>Large Drawer title</DrawerTitle>
        <DrawerDescription>This drawer uses size <code>lg</code>.</DrawerDescription>
      </DrawerHeader>
      <p>This is a large drawer. Use <code>size="lg"</code> to increase width.</p>
    </DrawerContent>
  </Drawer>
</template>