@workday/canvas-kit-react/dist/es6/side-panel/lib/SidePanel.d.ts

The parent module that contains all Workday Canvas Kit React components

import * as React from 'react';
import { CanvasSpaceValues } from '@workday/canvas-kit-react/tokens';
export interface SidePanelProps extends React.HTMLAttributes<HTMLDivElement> {
    /**
     * If true, set the SidePanel to the open state.
     * @default false;
     */
    open: boolean;
    /**
     * The function called when the toggle button is clicked. The toggle button is only shown if this prop is defined.
     */
    onToggleClick?: () => void;
    /**
     * The text or element to display as the SidePanel header.
     */
    header?: string | React.ReactNode;
    /**
     * The side from which the SidePanel opens. Accepts `Left` or `Right`.
     * @default SidePanelOpenDirection.Left
     */
    openDirection?: SidePanelOpenDirection;
    /**
     * The function called when the window width changes and reaches a width equivalent to `breakpoint`. For example, if the window is resized from a width of `1000px`, this will be called when the window reaches a width equivalent to `breakpoint`. The `aboveBreakpoint` argument passed to the callback function indicates whether the current window width is above or below `breakpoint` so you can control `open` based on the change.
     */
    onBreakpointChange?: (aboveBreakpoint: boolean) => void;
    /**
     * The padding of the SidePanel when it's open.
     */
    padding?: CanvasSpaceValues;
    /**
     * The window width at which the SidePanel triggers `onBreakPointChange`.
     * @default 768px
     */
    breakpoint?: number;
    /**
     * The width of the SidePanel when it's open.
     * @default 300px
     */
    openWidth?: number;
    /**
     * The background color of the SidePanel when it's open.
     * @default SidePanelBackgroundColor.White
     */
    backgroundColor?: SidePanelBackgroundColor;
    /**
     * The `aria-label` that describes closing the navigation.
     * @default 'close navigation'
     */
    closeNavigationAriaLabel?: string;
    /**
     * The `aria-label` that describes opening the navigation.
     * @default 'open navigation'
     */
    openNavigationAriaLabel?: string;
}
export interface SidePanelState {
    screenSize: number;
}
export declare enum SidePanelOpenDirection {
    Left = 0,
    Right = 1
}
export declare enum SidePanelBackgroundColor {
    White = 0,
    Transparent = 1,
    Gray = 2
}
export declare class SidePanel extends React.Component<SidePanelProps, SidePanelState> {
    static OpenDirection: typeof SidePanelOpenDirection;
    static BackgroundColor: typeof SidePanelBackgroundColor;
    constructor(props: SidePanelProps);
    state: {
        screenSize: number;
    };
    componentDidMount(): void;
    componentWillUnmount(): void;
    render(): React.JSX.Element;
    private handleResize;
    private onToggleClick;
    private toggleButtonDirection;
}
//# sourceMappingURL=SidePanel.d.ts.map