import { Drawer } from "wis/drawer"

API Reference#

Name	Type	Default	Description
title	string	none	Drawer header text, displayed at the top of the module.
description	string	none	Drawer description text, displayed in the drawer header.
toggleTip	ReactNode	none	The toggle tip.
side	right bottom	bottom	Configure the sliding direction of the Drawer from the screen edge.
size	number	none	Configure drawer dimensions where the 'side' property determines measurement type: setting to 'bottom' specifies height, while 'right' defines width.
closeable	boolean	true	Set whether to display the close icon in the Drawer.
maskCloseable	boolean	true	Enable closing the Drawer by clicking the overlay mask.
modal	boolean	true	Configure whether the popup is in modal mode.
open	boolean	none	Controlled open state of the Drawer. Must be used with onOpen.
defaultOpen	boolean	none	Initial open state of the Drawer when first rendered.
onOpen	(open: boolean) => void	none	Event handler called when the Drawer's open state changes.

Method#

import { useRef } from "react"
import { Drawer, type DrawerRef } from "wis/drawer"
import { Button } from "wis/button"
 
function () {
  const drawer = useRef<DrawerRef>(null);
 
  return (
    <>
      <Button text="Open" onClick={() => drawer.current?.show()} />
      <Drawer ref={drawer} title="Drawer Title" />
    </>
  )
}

Type Definition

interface DrawerRef {
  show: () => void;
  hide: () => void;
}

show(): void#

show Drawer

hide(): void#

hide Drawer