@progress/kendo-react-layout
Version:
React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package
56 lines (55 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 { AppBarSectionProps } from './interfaces/AppBarSectionProps';
import * as React from 'react';
/**
* The AppBarSection ref.
*/
export interface AppBarSectionHandle {
/**
* The AppBarSection element.
*/
element: HTMLDivElement | null;
/**
* Focus the AppBarSection.
*/
focus: () => void;
}
/**
* Represents the [KendoReact AppBarSection component](https://www.telerik.com/kendo-react-ui/components/layout/appbar/content-arrangement#toc-sections).
*
* @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 AppBarSection: React.ForwardRefExoticComponent<AppBarSectionProps & React.RefAttributes<AppBarSectionHandle | null>>;