Footer¶

The footer provides legal information like copyrights and further links to legal artifacts to users.

UsageDesignCode

Usage¶

The footer is a part of an overarching concept for legal guidelines.

When to use¶

The footer is mandatory in the following cases:

On the landing page.
On all other pages, where no application header is provided, which contains the legal information.

The footer must not be used on pages, where the application header is provided, and contains the legal information.

Design¶

Elements¶

The footer contains the Copyright Notice and a link list to (legal) artifacts.

Footer construction

\1.Link list, 2. Copyright notice

Wide version¶

The wide representation of the footer has to be used if the Copyright Notice and the links do have enough space on a single line.

Footer - Wide

Small version¶

The small representation of the footer has to be used if the Copyright Notice and the links do not have enough space on a single line. The Copyright Notice gets an own line always and a link must not contain a line break.

Footer - Small

Code¶

The links input allows 3 kinds of links.

action perform a given function.
href link to external websites.
link link to an internal route.

The vertical padding of this component can be configured. Just set $page-footer-padding (Default: 13px) to your desired value.

Usage¶

import { SiFooterComponent } from '@siemens/element-ng/footer';

@Component({
  imports: [SiFooterComponent, ...]
})

SiFooterComponent API Documentation¶

selector

si-footer

Input Properties¶

Name	Type	Default	Description
copyright ¶	`string`		Copyright of your application.
links ¶	`Link`[]		List of additional links.

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.