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