@progress/kendo-react-layout/drawer/DrawerContent.d.ts

React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { DrawerContentProps } from './interfaces/DrawerContentProps';
import * as React from 'react';
/**
 * The DrawerContent ref.
 */
export interface DrawerContentHandle {
    /**
     * The DrawerContent element.
     */
    element: HTMLDivElement | null;
}
/**
 * Represents the [KendoReact Drawer component](https://www.telerik.com/kendo-react-ui/components/layout/drawer).
 *
 * @example
 * ```jsx
 * const App = () => {
 *   const items = [
 *       { text: 'Inbox', icon: 'k-i-inbox', selected: true },
 *       { separator: true },
 *       { text: 'Notifications', icon: 'k-i-bell', disabled: true },
 *       { text: 'Calendar', icon: 'k-i-calendar' },
 *       { separator: true },
 *       { text: 'Attachments', icon: 'k-i-hyperlink-email' },
 *       { text: 'Favourites', icon: 'k-i-star' }
 *   ];
 *
 *   const [expanded, setExpanded] = React.useState(true);
 *   const handleClick = () => setExpanded(prevState => !prevState);
 *
 *   return (
 *       <Drawer expanded={expanded} position='start' mode='push' items={items}>
 *           <DrawerContent>
 *               <Button onClick={handleClick}>Toggle the drawer state</Button>
 *           </DrawerContent>
 *       </Drawer>
 *   );
 * };
 * ```
 */
export declare const DrawerContent: React.ForwardRefExoticComponent<DrawerContentProps & React.RefAttributes<DrawerContentHandle | null>>;