office-ui-fabric-react
Version:
Reusable React components for building experiences for Microsoft 365.
89 lines • 4.93 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
/**
* {@docCategory Panel}
*/
var PanelType;
(function (PanelType) {
/**
* Renders the Panel with a `fluid` (full screen) width.
* Recommended for use on small screen breakpoints.
* - Small (320-479): full screen width, 16px left/right padding
* - Medium (480-639): full screen width, 16px left/right padding
* - Large (640-1023): full screen width, 32px left/right padding
* - XLarge (1024-1365): full screen width, 32px left/right padding
* - XXLarge (1366-up): full screen width, 40px left/right padding
*/
PanelType[PanelType["smallFluid"] = 0] = "smallFluid";
/**
* Renders the Panel in fixed-width `small` size, anchored to the far side (right in LTR mode).
* - Small (320-479): adapts to `PanelType.smallFluid` at this breakpoint
* - Medium (480-639): 340px width, 16px left/right padding
* - Large (640-1023): 340px width, 32px left/right padding
* - XLarge (1024-1365): 340px width, 32px left/right padding
* - XXLarge (1366-up): 340px width, 40px left/right padding
*/
PanelType[PanelType["smallFixedFar"] = 1] = "smallFixedFar";
/**
* Renders the Panel in fixed-width `small` size, anchored to the near side (left in LTR mode).
* - Small (320-479): 272px width, 16px left/right padding
* - Medium (480-639): 272px width, 16px left/right padding
* - Large (640-1023): 272px width, 32px left/right padding
* - XLarge (1024-1365): 272px width, 32px left/right padding
* - XXLarge (1366-up): 272px width, 40px left/right padding
*/
PanelType[PanelType["smallFixedNear"] = 2] = "smallFixedNear";
/**
* Renders the Panel in `medium` size, anchored to the far side (right in LTR mode).
* - Small (320-479): adapts to `PanelType.smallFluid` at this breakpoint
* - Medium (480-639): adapts to `PanelType.smallFixedFar` at this breakpoint
* - Large (640-1023): 592px width, 32px left/right padding
* - XLarge (1024-1365): 644px width, 32px left/right padding
* - XXLarge (1366-up): 644px width, 40px left/right padding
*/
PanelType[PanelType["medium"] = 3] = "medium";
/**
* Renders the Panel in `large` size, anchored to the far side (right in LTR mode).
* - Small (320-479): adapts to `PanelType.smallFluid` at this breakpoint
* - Medium (480-639): adapts to `PanelType.smallFixedFar` at this breakpoint
* - Large (640-1023): adapts to `PanelType.medium` at this breakpoint
* - XLarge (1024-1365): 48px fixed left margin, fluid width, 32px left/right padding
* - XXLarge (1366-up): 428px fixed left margin, fluid width, 40px left/right padding
*/
PanelType[PanelType["large"] = 4] = "large";
/**
* Renders the Panel in `large` size, anchored to the far side (right in LTR mode), with a fixed width at
* XX-Large breakpoint.
* - Small (320-479): adapts to `PanelType.smallFluid` at this breakpoint
* - Medium (480-639): adapts to `PanelType.smallFixedFar` at this breakpoint
* - Large (640-1023): adapts to `PanelType.medium` at this breakpoint
* - XLarge (1024-1365): 48px fixed left margin, fluid width, 32px left/right padding
* - XXLarge (1366-up): 940px width, 40px left/right padding
*/
PanelType[PanelType["largeFixed"] = 5] = "largeFixed";
/**
* Renders the Panel in `extra large` size, anchored to the far side (right in LTR mode).
* - Small (320-479): adapts to `PanelType.smallFluid` at this breakpoint
* - Medium (480-639): adapts to `PanelType.smallFixedFar` at this breakpoint
* - Large (640-1023): adapts to `PanelType.medium` at this breakpoint
* - XLarge (1024-1365): adapts to `PanelType.large` at this breakpoint
* - XXLarge (1366-1919): 176px fixed left margin, fluid width, 40px left/right padding
* - XXXLarge (1920-up): 176px fixed left margin, fluid width, 40px left/right padding
*/
PanelType[PanelType["extraLarge"] = 6] = "extraLarge";
/**
* Renders the Panel in `custom` size using `customWidth`, anchored to the far side (right in LTR mode).
* - Has a fixed width provided by the `customWidth` prop
* - When screen width reaches the `customWidth` value it will behave like a fluid width Panel
* taking up 100% of the viewport width
*/
PanelType[PanelType["custom"] = 7] = "custom";
/**
* Renders the Panel in `custom` size using `customWidth`, anchored to the near side (left in LTR mode).
* - Has a fixed width provided by the `customWidth` prop
* - When screen width reaches the `customWidth` value it will behave like a fluid width Panel
* taking up 100% of the viewport width
*/
PanelType[PanelType["customNear"] = 8] = "customNear";
})(PanelType = exports.PanelType || (exports.PanelType = {}));
//# sourceMappingURL=Panel.types.js.map