@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.81 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 { AppBarSpacerProps } from './interfaces/AppBarSpacerProps';
import * as React from 'react';
/**
* The AppBarSpacer ref.
*/
export interface AppBarSpacerHandle {
/**
* The AppBarSpacer element.
*/
element: HTMLDivElement | null;
/**
* Focus the AppBarSpacer.
*/
focus: () => void;
}
/**
* Represents the [KendoReact AppBarSpacer component](https://www.telerik.com/kendo-react-ui/components/layout/appbar/content-arrangement#toc-spacings).
* Used to give additional white space between the AppBar sections and provides a way for customizing its width.
*
* @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 AppBarSpacer: React.ForwardRefExoticComponent<AppBarSpacerProps & React.RefAttributes<AppBarSpacerHandle | null>>;