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