The Burger component is a customizable hamburger menu that displays a Drawer component with a Menu component inside when clicked. It also includes a symbol before the content.
The Burger component is a customizable hamburger menu that displays a Drawer component with a Menu component inside when clicked. It also includes a symbol before the content.
import { Burger } from '@lobehub/ui';| Name | Description | Type | Default |
|---|---|---|---|
| className | -- | string | -- |
| drawerProps | -- | {extra?:ReactNode;size?:"large"|"default";style?:object;className?:string;children?:ReactNode;onKeyDown?:(event:E)=>void;onKeyUp?:(event:E)=>void;onClick?:(event:E)=>void;onMouseEnter?:(event:E)=>void;onMouseLeave?:(event:E)=>void;onMouseOver?:(event:E)=>void;autoFocus?:boolean;id?:string;title?:ReactNode;width?:number|string;height?:number|string;visible?:boolean;prefixCls?:string;classNames?:object;loading?:boolean;rootClassName?:string;styles?:object;footer?:ReactNode;mask?:boolean;placement?:"top"|"bottom"|"left"|"right";open?:boolean;closable?:{closeIcon?:ReactNode;disabled?:boolean}|boolean;onClose?:(e:React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>)=>void;closeIcon?:ReactNode;motion?:CSSMotionProps|(placement:import("/node_modules/rc-drawer/lib/DrawerPopup").Placement)=>{motionName?:string|{appear?:string;enter?:string;leave?:string;appearActive?:string;enterActive?:string;leaveActive?:string};visible?:boolean;motionAppear?:boolean;motionEnter?:boolean;motionLeave?:boolean;motionLeaveImmediately?:boolean;motionDeadline?:number;forceRender?:boolean;removeOnLeave?:boolean;leavedClassName?:string;eventProps?:object;onAppearPrepare?:(element:HTMLElement)=>void|Promise;onEnterPrepare?:(element:HTMLElement)=>void|Promise;onLeavePrepare?:(element:HTMLElement)=>void|Promise;onAppearStart?:(element:HTMLElement,event:import("/node_modules/rc-motion/es/interface").MotionEvent)=>void|CSSProperties;onEnterStart?:(element:HTMLElement,event:import("/node_modules/rc-motion/es/interface").MotionEvent)=>void|CSSProperties;onLeaveStart?:(element:HTMLElement,event:import("/node_modules/rc-motion/es/interface").MotionEvent)=>void|CSSProperties;onAppearActive?:(element:HTMLElement,event:import("/node_modules/rc-motion/es/interface").MotionEvent)=>void|CSSProperties;onEnterActive?:(element:HTMLElement,event:import("/node_modules/rc-motion/es/interface").MotionEvent)=>void|CSSProperties;onLeaveActive?:(element:HTMLElement,event:import("/node_modules/rc-motion/es/interface").MotionEvent)=>void|CSSProperties;onAppearEnd?:(element:HTMLElement,event:import("/node_modules/rc-motion/es/interface").MotionEvent)=>void|boolean;onEnterEnd?:(element:HTMLElement,event:import("/node_modules/rc-motion/es/interface").MotionEvent)=>void|boolean;onLeaveEnd?:(element:HTMLElement,event:import("/node_modules/rc-motion/es/interface").MotionEvent)=>void|boolean;onVisibleChanged?:(visible:boolean)=>void;internalRef?:|bivarianceHack|RefObject;children?:(props:{ [key: string]: any; visible?: boolean | undefined; className?: string | undefined; style?: React.CSSProperties | undefined; },ref:(node: any) => void)=>{type:any;props:any;key:string|}};maskStyle?:object;push?:boolean|PushConfig;forceRender?:boolean;keyboard?:boolean;rootStyle?:object;zIndex?:number;maskClosable?:boolean;maskClassName?:string;maskMotion?:object;afterOpenChange?:(open:boolean)=>void;drawerRender?:(node:React.ReactNode)=>|string|number|unknown|ReactElement|Iterable<ReactNode>|ReactPortal|Promise<AwaitedReactNode>|boolean;destroyOnClose?:boolean;getContainer?:string|Element|DocumentFragment|()=>Element|DocumentFragment|boolean;panelRef?:|bivarianceHack|RefObject;headerStyle?:object;bodyStyle?:object;footerStyle?:object;contentWrapperStyle?:object;drawerStyle?:object;afterVisibleChange?:(open:boolean)=>void} | -- |
| fullscreen | -- | boolean | -- |
| headerHeight | The height of the header component | number | 64 |
| iconProps | -- | any | -- |
| items | The items to be displayed in the menu | ItemType<MenuItemType>[] | -- |
| onClick | -- | (info:import("/node_modules/rc-menu/lib/interface").MenuInfo)=>void | -- |
| openKeys | The keys of the currently open sub-menus | string[] | -- |
| opened | Whether the menu is currently open or not | boolean | (required) |
| rootClassName | -- | string | -- |
| selectedKeys | The keys of the currently selected menu items | string[] | -- |
| setOpened | A callback function to set the opened state | (state:boolean)=>void | (required) |
| style | -- | {} | -- |