New to KendoReactLearn about KendoReact Free.

DrawerItem

Represents the KendoReact Drawer component.

A Functional Component.

jsx
   const App = () => {
     const [stateVisible, setStateVisible] = React.useState(true);
     const handleClick = () => { setStateVisible(prevState => !prevState); };

     return (
       <Drawer expanded={stateVisible} mode={'push'}>
           <DrawerNavigation>
               <DrawerItem text="Inbox" icon="k-i-inbox" />
               <DrawerItem separator={true} />
               <DrawerItem text="Notifications" icon="k-i-bell" disabled={true}/>
               <DrawerItem text="Calendar" icon="k-i-calendar"/>
               <DrawerItem separator={true} />
               <DrawerItem text="Attachments" icon="k-i-hyperlink-email" selected={true}/>
               <DrawerItem text="Favourites" icon="k-i-star-outline"/>
           </DrawerNavigation>
           <DrawerContent><button className="k-button" onClick={handleClick}>Toggle the drawer state</button></DrawerContent>
       </Drawer>
     );
   };

   ReactDOM.render(<App />, document.querySelector('my-app'));
NameTypeDefaultDescription

props

Omit<DrawerItemProps> intersected with RefAttributes<"null" | DrawerItemHandle>

The props of the DrawerItem component.

Not finding the help you need?
Contact Support