New to KendoReact? Learn about KendoReact Free.
DrawerItem
Represents the KendoReact Drawer 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'));
Name | Type | Default | Description |
---|---|---|---|
props |
|
The props of the DrawerItem component. |