SiCardHeaderComponent documentation¶

selector

si-card-header

Shared card header used internally by SiCardComponent , SiActionCardComponent , and SiDashboardCardComponent . Not intended for direct use by consuming applications.

Input Properties¶

Name	Type	Default	Description
actionBarTitle ¶	`TranslatableString`	`''`	Accessible title for the content action bar, used as an `aria-label` .
actionBarViewType ¶	`ViewType`	`'collapsible'`	Controls how the content action bar renders its actions.
actionParam ¶	`unknown`		Optional parameter passed to action item callbacks when an action is triggered.
heading ¶	`TranslatableString`		The primary title text displayed in the card header.
headingId ¶	`string`		HTML `id` applied to the heading element, used to associate `aria-labelledby` attributes.
primaryActions ¶	(`MenuItem` \| `ContentActionBarMainItem`)[]	`[]`	Primary action items rendered as buttons in the content action bar.
secondaryActions ¶	(`MenuItem` \| `MenuItem`)[]	`[]`	Secondary action items rendered in the content action bar overflow menu.
subHeading ¶	`TranslatableString`		The secondary title text displayed below the main heading.
subHeadingId ¶	`string`		HTML `id` applied to the sub-heading element, used to associate `aria-labelledby` attributes.

Attributes and Methods¶

Name	Type	Default	Description
(readonly) displayContentActionBar ¶	`Signal`<`boolean`>	...

Types Documentation¶

TranslatableString (`string` & `Translatable`)¶ Type alias 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.

ViewType (`"collapsible"` \| `"expanded"` \| `"mobile"`)¶ Type alias

ContentActionBarMainItem ((`MenuItemAction` \| `MenuItemCheckbox` \| `MenuItemLink` \| `MenuItemRouterLink` \| `MenuItemGroup`) & { iconOnly: `boolean` })¶ Type alias

MenuItem (`MenuItemGroup` \| `MenuItemAction` \| `MenuItemRouterLink` \| `MenuItemLink` \| `MenuItemRadioGroup` \| `MenuItemCheckbox` \| `MenuItemRadio` \| `MenuItemHeader` \| `MenuDivider`)¶ Type alias

MenuItemAction

extends MenuItemBase¶

Interface

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"`¶

MenuItemCheckbox

extends MenuItemBase¶

Interface

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"`¶

MenuItemLink

extends MenuItemBase¶

Interface

Properties
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`¶
The href property of the anchor. href: `string`¶
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`¶
The target property of the anchor. target?: `string`¶
type: `"link"`¶

MenuItemRouterLink

extends MenuItemBase¶

Interface

Represents a menu item that navigates using the Angular Router.

Requires a configured Angular Router.

Properties
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`¶
Navigation extras that are passed to the `RouterLink` . extras?: `NavigationExtras`¶
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`¶
Link for the angular router. Accepts the same values as `RouterLink` . routerLink: (`string` \| `any`[])¶
type: `"router-link"`¶

MenuItemGroup

extends MenuItemBase¶

Interface

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"`¶

MenuItemRadioGroup

¶

Interface

Properties
Items that are part of the radio group. children: [ `MenuItemHeader`, ...(`MenuItemRadio` \| `MenuItemHeader` \| `MenuDivider`)[] ]¶
type: `"radio-group"`¶

MenuItemRadio

extends MenuItemBase¶

Interface

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"`¶

MenuItemHeader

¶

Interface

Properties
The label of the header. label: `string`¶
type: `"header"`¶

MenuDivider

¶

Interface

Properties
type: `"divider"`¶

MenuItemBase

¶

Interface

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`¶

SiMenuActionService

¶

Class

Implement and provide this to an SiMenuFactoryComponent to receive trigger events.

Constructor
() => `{}`¶

Methods

actionTriggered

(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`¶

LinkAction

¶

Interface

Used in events emitted from SiLinkActionService

Properties
link: `Link`¶
param: `any`¶

Link

¶

Interface

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`)¶
A boolean that lets the link know whether it is disabled or not. disabled?: `boolean`¶
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`¶
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`¶
Defines the link of the menu item within the application using the angular router link concept. Accepts an array of `any` as per [routerLink API definition] https://angular.dev/api/router/RouterLink . link?: (`string` \| `any`[])¶
The navigation extras provide additional routing options when using the router link. navigationExtras?: `NavigationExtras`¶
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`¶
The title of the menu item. Can be either the title to be displayed or the translation key. title?: `TranslatableString`¶
The optional tooltip of the link. Can be either the text to be displayed or the translation key. tooltip?: `TranslatableString`¶

SiMenuFactoryComponent

¶

Class

▶

Constructor
() => `{}`¶

Properties
Parameter passed to triggered menu item actions. actionParam: `InputSignal`<`unknown`> = ...¶
Menu items to render. Supports legacy and current menu item models. items: `InputSignal`<(readonly (`MenuItem` \| `MenuItem`)[] \| `undefined`)> = ...¶
linkActionService: (`SiLinkActionService` \| `null`) = ...¶
menuActionService: (`SiMenuActionService` \| `null`) = ...¶

Methods

isLegacyItemStyle

(item: (MenuItem | MenuItem)) => item is MenuItem¶

Parameters
item: (`MenuItem` \| `MenuItem`)¶

isNewItemStyle

(item: (MenuItem | MenuItem)) => item is MenuItem¶

Parameters
item: (`MenuItem` \| `MenuItem`)¶

radioOrCheckboxTriggered

(item: MenuItem) => void¶

Parameters
item: `MenuItem`¶

runAction

(item: (MenuItemAction | MenuItemCheckbox | MenuItemRadio)) => void¶

Parameters
item: (`MenuItemAction` \| `MenuItemCheckbox` \| `MenuItemRadio`)¶

trackItem

(index: number, item: (MenuItem | MenuItem)) => (string | number)¶

Parameters
index: `number`¶
item: (`MenuItem` \| `MenuItem`)¶

SiLinkActionService

¶

Class

▶

Constructor
() => `{}`¶

Properties
Observable which emits the link and param to run the action on. action$: `Observable`<`LinkAction`> = `this.actionSubject.asObservable()`¶
actionSubject: `Subject`<`LinkAction`> = ...¶

Methods

emit

(link: Link, param: any) => void¶

Emit a new link and param pair to run the action on.

Parameters
link: `Link`¶
param: `any`¶

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