office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
139 lines (138 loc) • 4.69 kB
TypeScript
import * as React from 'react';
import { Panel } from './Panel';
export interface IPanelProps extends React.Props<Panel> {
/**
* Whether the panel is displayed.
* @default false
*/
isOpen?: boolean;
/**
* Has the close button visible.
* @default true
*/
hasCloseButton?: boolean;
/**
* Whether the panel can be light dismissed.
* @default false
*/
isLightDismiss?: boolean;
/**
* Whether the panel uses a modal overlay or not
* @default true
*/
isBlocking?: boolean;
/**
* Header text for the Panel.
* @default ""
*/
headerText?: string;
/**
* Event handler for when the panel is closed.
*/
onDismiss?: () => void;
/**
* Additional styling options.
*/
className?: string;
/**
* Type of the panel.
* @default PanelType.smallFixedRight
*/
type?: PanelType;
/**
* Aria label on close button
*/
closeButtonAriaLabel?: string;
/**
* Optional parameter to provider the class name for header text
*/
headerClassName?: string;
/**
* Sets the HTMLElement to focus on when exiting the FocusTrapZone.
* @default The element.target that triggered the Panel.
*/
elementToFocusOnDismiss?: HTMLElement;
/**
* Indicates if this Panel will ignore keeping track of HTMLElement that activated the Zone.
* @default false
*/
ignoreExternalFocusing?: boolean;
/**
* Indicates whether Panel should force focus inside the focus trap zone
* @default true
*/
forceFocusInsideTrap?: boolean;
/**
* Indicates the selector for first focusable item
*/
firstFocusableSelector?: string;
}
export declare enum PanelType {
/**
* Renders the panel in 'small' mode, anchored to the far side (right in LTR mode), and has a fluid width.
* Only used on Small screen breakpoints.
* Small: 320-479px width (full screen), 16px Left/Right padding
* Medium: <unused>
* Large: <unused>
* XLarge: <unused>
* XXLarge: <unused>
*/
smallFluid = 0,
/**
* Renders the panel in 'small' mode, anchored to the far side (right in LTR mode), and has a fixed width.
* Small: 272px width, 16px Left/Right padding
* Medium: 340px width, 16px Left/Right padding
* Large: 340px width, 32px Left/Right padding
* XLarge: 340px width, 32px Left/Right padding
* XXLarge: 340px width, 40px Left/Right padding
*/
smallFixedFar = 1,
/**
* Renders the panel in 'small' mode, anchored to the near side (left in LTR mode), and has a fixed width.
* Small: 272px width, 16px Left/Right padding
* Medium: 272px width, 16px Left/Right padding
* Large: 272px width, 32px Left/Right padding
* XLarge: 272px width, 32px Left/Right padding
* XXLarge: 272px width, 32px Left/Right padding
*/
smallFixedNear = 2,
/**
* Renders the panel in 'medium' mode, anchored to the far side (right in LTR mode).
* Small: <adapts to smallFluid>
* Medium: <adapts to smallFixedFar>
* Large: 48px fixed left margin, 32px Left/Right padding
* XLarge: 644px width, 32px Left/Right padding
* XXLarge: 643px width, 40px Left/Right padding
*/
medium = 3,
/**
* Renders the panel in 'large' mode, anchored to the far side (right in LTR mode), and is fluid at XXX-Large breakpoint.
* Small: <adapts to smallFluid>
* Medium: <adapts to smallFixedFar>
* Large: <adapts to medium>
* XLarge: 48px fixed left margin, 32px Left/Right padding
* XXLarge: 48px fixed left margin, 32px Left/Right padding
* XXXLarge: 48px fixed left margin, (no redlines for padding, assuming previous breakpoint)
*/
large = 4,
/**
* Renders the panel in 'large' mode, anchored to the far side (right in LTR mode), and is fixed at XXX-Large breakpoint.
* Small: <adapts to smallFluid>
* Medium: <adapts to smallFixedFar>
* Large: <adapts to medium>
* XLarge: 48px fixed left margin, 32px Left/Right padding
* XXLarge: 48px fixed left margin, 32px Left/Right padding
* XXXLarge: 940px width, (no redlines for padding, assuming previous breakpoint)
*/
largeFixed = 5,
/**
* Renders the panel in 'extra large' mode, anchored to the far side (right in LTR mode).
* Small: <adapts to smallFluid>
* Medium: <adapts to smallFixedFar>
* Large: <adapts to medium>
* XLarge: <adapts to large>
* XXLarge: 176px fixed left margin, 40px Left/Right padding
* XXXLarge: 176px fixed left margin, 40px Left/Right padding
*/
extraLarge = 6,
}