@awsui/components-react
Version:
On July 19th, 2022, we launched [Cloudscape Design System](https://cloudscape.design). Cloudscape is an evolution of AWS-UI. It consists of user interface guidelines, front-end components, design resources, and development tools for building intuitive, en
50 lines • 2.87 kB
TypeScript
import { AppLayoutProps, BaseLayoutProps } from '../app-layout/interfaces';
export interface AppLayoutToolbarProps extends BaseLayoutProps {
/**
* If `true`, the navigation trigger is not displayed at all,
* while navigation drawer might be displayed, but opened using a custom trigger.
*/
navigationTriggerHide?: boolean;
/**
* Drawers property. If you set both `drawers` and `tools`, `drawers` will take precedence.
* Each Drawer is an item in the drawers wrapper with the following properties:
* * id (string) - the id of the drawer.
* * content (React.ReactNode) - the content in the drawer.
* * trigger (DrawerTrigger) - (Optional) the button that opens and closes the active drawer.
* If not set, a corresponding trigger button is not displayed, while the drawer might be displayed, but opened using a custom trigger.
* * ariaLabels (DrawerAriaLabels) - the labels for the interactive elements of the drawer.
* * badge (boolean) - (Optional) Adds a badge to the corner of the icon to indicate a state change. For example: Unread notifications.
* * resizable (boolean) - (Optional) if the drawer is resizable or not.
* * defaultSize (number) - (Optional) starting size of the drawer. if not set, defaults to 290.
* * onResize (({ size: number }) => void) - (Optional) Fired when the active drawer is resized.
*
* #### DrawerTrigger
* - `iconName` (IconProps.Name) - (Optional) Specifies the icon to be displayed.
* - `iconSvg` (React.ReactNode) - (Optional) Specifies the SVG of a custom icon. For more information, see [SVG icon guidelines](/components/icon/?tabId=api#slots)
*
* #### DrawerAriaLabels
* - `drawerName` (string) - Label for the drawer itself, and for the drawer trigger button tooltip text.
* - `closeButton` (string) - (Optional) Label for the close button.
* - `triggerButton` (string) - (Optional) Label for the trigger button.
* - `resizeHandle` (string) - (Optional) Label for the resize handle.
*/
drawers?: Array<AppLayoutToolbarProps.Drawer>;
}
export declare namespace AppLayoutToolbarProps {
type AnalyticsMetadata = AppLayoutProps.AnalyticsMetadata;
type ContentType = AppLayoutProps.ContentType;
interface Ref extends AppLayoutProps.Ref {
/**
* Focuses the navigation. Use this to focus the navigation after opening it programmatically.
*/
focusNavigation(): void;
}
type Drawer = AppLayoutProps.Drawer;
type DrawerAriaLabels = AppLayoutProps.DrawerAriaLabels;
type Labels = AppLayoutProps.Labels;
type ChangeDetail = AppLayoutProps.ChangeDetail;
type SplitPanelResizeDetail = AppLayoutProps.SplitPanelResizeDetail;
type SplitPanelPreferences = AppLayoutProps.SplitPanelPreferences;
type SplitPanelPosition = AppLayoutProps.SplitPanelPosition;
type DrawerChangeDetail = AppLayoutProps.DrawerChangeDetail;
}