Side Sheet
5.0.35
Side sheets are surfaces containing supplementary content that are anchored to the right edge of the screen.
| Namn | Typ | Beskrivning |
|---|---|---|
AppBarProps | AppBarProps | Object to set props for the app bar. |
anchor | "left" | "right" | Side from which the drawer will appear. |
ariaLabel * | string | A screen reader label for the dialog container. Should often be the same as the visible heading |
children * | React.ReactNode | The content that should be rendered inside the side sheet. |
disableFocusHeading | boolean | If true, the Sidesheet will not automatically focus the first heading. |
hasAppBar | boolean | Hide App Bar in Side Sheet |
onClose * | () => void | Function that handles closing the side sheet. Usually a function that sets open = false. |
open * | boolean | Boolean indicating if the side sheet is open. Default is false. |
paperSx | SxProps<Theme> | The system prop that allows additional CSS styles to paper. |
ref | React.Ref<HTMLDivElement> | Ref to the side sheet |
sx | SxProps<Theme> | The system prop that allows defining system overrides as well as additional CSS styles. |
type | SideSheetType | Sets whether the sheet should be rendered as a modal with scrim, or inline. |
customWidth | never | string | undefined | Custom width. |
size | "extraSmall" | "small" | "wide" | undefined | Sets the width of the side sheet. Small is 360px, large is 480px. |
npm install @sj-ab/component-library.ui.side-sheetImporter av Side Sheet
Repos med Side Sheet
Senaste installerade version av Side Sheet
Äldsta installerade version av Side Sheet