SiSidePanelComponent documentation¶
selector
si-side-panelInput Properties¶
| Name | Type | Default | Description |
|---|---|---|---|
| breakpoints ¶ | Breakpoints | Specifies custom breakpoints to automatically switch mode. The smMinimum specifies the breakpoint for the mobile view.The lgMinimum specifies the breakpoint to allow scroll mode(below automatically uses over mode). The xlMinimum specifies the breakpoint to allow scroll modewith wide size (below automatically uses over mode). | |
| collapsed ¶ | boolean | Default state of navigation | |
| collapsible ¶ | boolean | false | |
| enableMobile ¶ | boolean | false | Enable mobile drawer for small screen sizes. Should not be used in conjunction with the vertical navbar. |
| mode ¶ | SidePanelMode | 'over' | Mode of side panel (ignored below a certain width) |
| size ¶ | SidePanelSize | 'regular' | Size of side-panel |
| toggleItemLabel ¶ | TranslatableString | $localize`:@@SI_SIDE_PANEL.TOGGLE:Toggle` | Toggle icon aria-label, required for a11y |
Output Properties¶
| Name | Type | Description |
|---|---|---|
| closed ¶ | void | Emits when the panel is closed |
| collapsedChange ¶ | boolean | Default state of navigation |
| contentResize ¶ | ElementDimensions | Emits whenever the content is resized due to opening and closing or parent resize. |
Attributes and Methods¶
| Name | Type | Default | Description |
|---|---|---|---|
| toggleSidePanel() ¶ | () => void | Toggle whether the side panel is expanded or not. |
Types Documentation¶
|
| Side panel mode options. - scroll: pushes content when side panel opens/closes, - over: Opens as an overlay on existing content. Just like modal. |
|---|
| Side panel size options. - wide: 500px, - regular: 390px |
|---|
| Represents a translatable string. This can either be a translation key, e.g. ACTIONS.EDIT that will be automatically translated when displayed on the UI or a pre-translated string, e.g. Edit . Equivalent to a normal string in usage and functionality. |
|---|
|
Translatable import imported from @siemens/element-translate-ng |
|---|
Except where otherwise noted, content on this site is licensed under MIT License.