Skip to content

SiSidePanelContentComponent documentation

selector
si-side-panel-content

Input Properties

NameTypeDefaultDescription
closeButtonLabel
TranslatableString$localize`:@@SI_SIDE_PANEL.CLOSE:Close`Aria label for close button. Needed for a11y
collapsible
booleanfalse
heading
TranslatableString''Header of side panel
primaryActions
(MenuItem | ContentActionBarMainItem)[][]Input list of primary action items
searchable
booleanfalseToggles search bar
searchPlaceholder
TranslatableString$localize`:@@SI_SIDE_PANEL.SEARCH_PLACEHOLDER:Search...`Placeholder text for search
secondaryActions
(MenuItem | MenuItem)[][]Input list of secondary action items.
showMobileDrawerBadge
booleanfalseShow a badge on the mobile drawer indicating a new alert or notification
statusActions
StatusItem[][]Status icons/actions
toggleItemLabel
TranslatableString$localize`:@@SI_SIDE_PANEL.TOGGLE:Toggle`Toggle icon aria-label, required for a11y

Output Properties

NameTypeDescription
searchEvent
stringOutput for search bar input

Types Documentation

(string & Translatable)
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.
((MenuItemAction | MenuItemCheckbox | MenuItemLink | MenuItemRouterLink | MenuItemGroup) & { iconOnly: boolean })
(MenuItemGroup | MenuItemAction | MenuItemRouterLink | MenuItemLink | MenuItemRadioGroup | MenuItemCheckbox | MenuItemRadio | MenuItemHeader | MenuDivider)
extends MenuItem
An extension of MenuItem to support combined icons
Properties
A function that will be invoked when clicking on the menu item. When passed as a string, use together with SiLinkActionService to receive events. This is meant for repetitive things in lists/tables/etc.
action?: (string | (param: any) => any) from MenuItemLegacy.action
Defines the content of the optional badge. Should be a number or something like "100+". if undefined or empty string, no badge is displayed
badge?: (string | number) from MenuItemLegacy.badge
Defines the background color of the badge. Default is specific to Element flavour.
badgeColor?: string from MenuItemLegacy.badgeColor
Show a dot badge without content?
badgeDot?: boolean from MenuItemLegacy.badgeDot
Defines the badge style
badgeStyle?: ("" | "inline" | "dot") from MenuItemLegacy.badgeStyle
Defines if custom content is chosen in account dropdown (otherwise accountItems are used)
customContent?: boolean from MenuItemLegacy.customContent
A boolean that lets the link know whether it is disabled or not.
disabled?: boolean from MenuItemLegacy.disabled
Whether the menu items sub-menu should open upwards instead of downwards.
dropUpwards?: boolean from MenuItemLegacy.dropUpwards
If the menu item has children you can specify if they are visible or not.
expanded?: boolean from MenuItemLegacy.expanded
Defines a href URI that the menu item will be linked to. Will be used to set the href attribute of the a element. Will only be used if link and function is not set.
href?: string from MenuItemLegacy.href
The web font icon class name (e.g. element-settings-outline).
icon?: string from MenuItemLegacy.icon
Defines if only the icon is shown in the default navigation bar.
iconOnly?: boolean from MenuItemLegacy.iconOnly
An optional id to uniquely identify the menu item.
id?: string from MenuItemLegacy.id
The value for an image src tag. Maybe a relative or absolute link to an jpg or gif image.
image?: string from MenuItemLegacy.image
A boolean that lets the link know whether it is active or not. It is useful when action() is executed instead of link route.
isActive?: boolean from MenuItemLegacy.isActive
Whether the menu item should be displayed as a heading/title, will also disable links and actions.
isHeading?: boolean from MenuItemLegacy.isHeading
A navigation bar item can have a sub-menu, if these items are set. They define the sub-menu content.
items?: MenuItem[] from MenuItemLegacy.items
The navigation extras provide additional routing options when using the router link.
navigationExtras?: NavigationExtras from MenuItemLegacy.navigationExtras
overlayIcon?: string
For single/multi choice items: the kind of icon to show.
selectionState?: ("" | "check" | "radio") from MenuItemLegacy.selectionState
The target attribute specifies where to open the linked document. If no target is specified, the link will open in the current tab.
target?: string from MenuItemLegacy.target
The title of the menu item. Can be either the title to be displayed or the translation key.
title?: TranslatableString from MenuItemLegacy.title
The optional tooltip of the link. Can be either the text to be displayed or the translation key.
tooltip?: TranslatableString from MenuItemLegacy.tooltip
Type to distinguish between check and radio menu items. Needs to be set for correct interaction and used for a11y.
type?: ("check" | "radio") from MenuItemLegacy.type
Translatable
import
extends MenuItemBase
Properties
Action that called when the item is triggered. A function will be called, a string will be dispatched to the SiMenuActionService .
action: (string | (actionParam: any, source: this) => void)
Badge that is rendered after the label.
badge?: (string | number) from badge
Color of the badge (not iconBadge).
badgeColor?: string from badgeColor
Whether the menu item id disabled.
disabled?: boolean from disabled
Optional icon that will be rendered before the label.
icon?: string from icon
Badge (always red) that is attached to the icon. If value===true, an empty red dot will be rendered.
iconBadge?: (string | number | boolean) from iconBadge
ID that will be attached to the DOM node.
id?: string from id
Label that is shown to the user.
label: TranslatableString from label
type: "action"
extends MenuItemBase
Properties
Action that called when the item is triggered. A function will be called, a string will be dispatched to the SiMenuActionService .
action: (string | (actionParam: any, source: this) => void)
Badge that is rendered after the label.
badge?: (string | number) from badge
Color of the badge (not iconBadge).
badgeColor?: string from badgeColor
Whether the checkbox is checked.
checked: boolean
Whether the menu item id disabled.
disabled?: boolean from disabled
Optional icon that will be rendered before the label.
icon?: string from icon
Badge (always red) that is attached to the icon. If value===true, an empty red dot will be rendered.
iconBadge?: (string | number | boolean) from iconBadge
ID that will be attached to the DOM node.
id?: string from id
Label that is shown to the user.
label: TranslatableString from label
type: "checkbox"
extends MenuItemBase
Properties
Badge that is rendered after the label.
badge?: (string | number) from badge
Color of the badge (not iconBadge).
badgeColor?: string from badgeColor
Submenu items for this menu item.
children: MenuItem[]
Whether the menu item id disabled.
disabled?: boolean from disabled
Optional icon that will be rendered before the label.
icon?: string from icon
Badge (always red) that is attached to the icon. If value===true, an empty red dot will be rendered.
iconBadge?: (string | number | boolean) from iconBadge
ID that will be attached to the DOM node.
id?: string from id
Label that is shown to the user.
label: TranslatableString from label
type: "group"
Properties
Items that are part of the radio group.
children: [ MenuItemHeader, ...(MenuItemRadio | MenuItemHeader | MenuDivider)[] ]
type: "radio-group"
extends MenuItemBase
Properties
Action that called when the item is triggered. A function will be called, a string will be dispatched to the SiMenuActionService .
action: (string | (actionParam: any, source: this) => void)
Badge that is rendered after the label.
badge?: (string | number) from badge
Color of the badge (not iconBadge).
badgeColor?: string from badgeColor
Whether the radio is checked.
checked: boolean
Whether the menu item id disabled.
disabled?: boolean from disabled
Optional icon that will be rendered before the label.
icon?: string from icon
Badge (always red) that is attached to the icon. If value===true, an empty red dot will be rendered.
iconBadge?: (string | number | boolean) from iconBadge
ID that will be attached to the DOM node.
id?: string from id
Label that is shown to the user.
label: TranslatableString from label
type: "radio"
Properties
The label of the header.
label: string
type: "header"
Properties
type: "divider"
Properties
Badge that is rendered after the label.
badge?: (string | number)
Color of the badge (not iconBadge).
badgeColor?: string
Whether the menu item id disabled.
disabled?: boolean
Optional icon that will be rendered before the label.
icon?: string
Badge (always red) that is attached to the icon. If value===true, an empty red dot will be rendered.
iconBadge?: (string | number | boolean)
ID that will be attached to the DOM node.
id?: string
Label that is shown to the user.
label: TranslatableString
Implement and provide this to an SiMenuFactoryComponent to receive trigger events.
Constructor
() => {}
Methods
(item: (MenuItemAction | MenuItemCheckbox | MenuItemRadio), actionParam: any) => void
Will be called by SiMenuFactoryComponent if an action is defined with a string instead of a function.
Parameters
item: (MenuItemAction | MenuItemCheckbox | MenuItemRadio)
actionParam?: any
Used in events emitted from SiLinkActionService
Properties
param: any
Constructor
() => {}
Properties
actionParam: InputSignal<unknown> = ...
items: InputSignal<(undefined | readonly (MenuItem | MenuItem)[])> = ...
linkActionService: (null | SiLinkActionService) = ...
menuActionService: (null | SiMenuActionService) = ...
Methods
(item: (MenuItem | MenuItem)) => item is MenuItem
Parameters
item: (MenuItem | MenuItem)
(item: (MenuItem | MenuItem)) => item is MenuItem
Parameters
item: (MenuItem | MenuItem)
(item: MenuItem) => void
Parameters
item: MenuItem
(item: (MenuItemAction | MenuItemCheckbox | MenuItemRadio)) => void
Parameters
item: (MenuItemAction | MenuItemCheckbox | MenuItemRadio)
Constructor
() => {}
Properties
Observable which emits the link and param to run the action on.
action$: Observable<LinkAction> = this.actionSubject.asObservable()
actionSubject: Subject<LinkAction> = ...
Methods
(link: Link, param: any) => void
Emit a new link and param pair to run the action on.
Parameters
param: any

Except where otherwise noted, content on this site is licensed under MIT License.