Link dashboard widget¶

Link dashboard widget is a list of links that provides quick access to frequently used functions, pages, or external resources.

UsageDesignCode

Usage¶

When to use¶

In dashboards and tile layouts.
To provide a list of navigation or action links.

Best practices¶

Prevent overcrowding by keeping the number of links between 2 and 6.
Keep labels short and clear, directly indicating the link's purpose and destination.
Arrange links by their relevance or frequency of use to facilitate quick access.
Use skeleton to represent its loading state.

Design¶

Elements¶

Icon (optional), 2. Heading, 3. Actions (optional), 4. Links

Code¶

The link widget is implemented by CSS classes and the usage of other Element components.

Component usage¶

To simplify the usage and reduce the code, Element offers a Angular component as wrapper with streamlined inputs. The component should be used together with the card.

import { SiLinkWidgetComponent } from '@siemens/element-ng/dashboard';

@Component({
  :
  imports: [SiLinkWidgetComponent]
})

SiLinkWidgetComponent API Documentation¶

selector

si-link-widget

The <si-link-widget> supports an easy composition of links and actions with support for skeleton loading indicator.

Input Properties¶

Name	Type	Default	Description
disableAutoLoadingIndicator ¶	`boolean`	`false`	Option to disable automatic start of skeleton loading indication.
initialLoadingIndicatorDebounceTime ¶	`number`	`300`	Initial delay time in milliseconds before enabling loading indicator. Only used once initially during construction.
numberOfLinks ¶	`number`	`3`	The number of skeleton progress indication rows.
showLinkIcons ¶	`boolean`	`false`	Option to enable trailing link arrow icons for each link.
showLoadingIndicator ¶	`boolean`	`false`	Input to start and stop the skeleton loading indication.
value ¶	(`Link`[] \| `undefined`)		The main value to be displayed. If no value is set, the skeleton indicates the loading of the value. Disable the automatic loading mechanism by setting `SiWidgetBodyBaseComponent.disableAutoLoadingIndicator` .

Attributes and Methods¶

Name	Type	Default	Description
ngOnChanges() ¶	() => `void`		A callback method that is invoked immediately after the default change detector has checked data-bound properties if at least one has changed, and before the view and content children are checked.
ngOnInit() ¶	() => `void`		A callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated.
(readonly) showLoadingIndicator ¶	`Signal`<`boolean`>	...

CSS class usage¶

For more flexibility and control, use the CSS classes directly in the <si-card> component.

Types Documentation¶

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

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.

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