@progress/kendo-react-layout
Version:
React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package
57 lines (56 loc) • 1.71 kB
TypeScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2026 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import { AppBarProps } from './interfaces/AppBarProps';
import * as React from 'react';
/**
* The AppBar ref.
*/
export interface AppBarHandle {
/**
* The AppBar element.
*/
element: HTMLDivElement | null;
/**
* Focus the AppBar.
*/
focus: () => void;
}
/**
* Represents the [KendoReact AppBar component](https://www.telerik.com/kendo-react-ui/components/layout/appbar).
* Used to display information, actions, branding titles and additional navigation on the current screen.
*
* @example
* ```jsx
*
* const App = () => {
* return (
* <AppBar>
* <AppBarSection>
* <span className="k-icon k-i-menu" />
* </AppBarSection>
*
* <AppBarSpacer style={{ width: 8 }} />
*
* <AppBarSection>
* <h1 className="title">{tc.text} AppBar</h1>
* </AppBarSection>
*
* <AppBarSpacer />
*
* <AppBarSection>
* <BadgeContainer>
* <span className="k-icon k-i-bell" />
* <Badge themeColor="info" shape="dot" />
* </BadgeContainer>
* </AppBarSection>
* </AppBar>
* );
* };
* ```
*/
export declare const AppBar: React.ForwardRefExoticComponent<AppBarProps & React.RefAttributes<AppBarHandle | null>>;