Platform: Footer Toolbar Component V1.0 Technical Design

Footer Toolbar Component

Summary

The footer toolbar always appears as floating footer at the bottom of the screen. The floating footer property creates some padding between screen and toolbar, improving visibility.

The control is used for closing or finalizing actions that impact the whole page. It is only visible when actions appear, when message handling is visible, or when the draft indicator is displayed. One main advantage of the footer bar is that this bar is always visible and will not scroll away.

Our general guideline is to use only icon buttons or text buttons. Icon and text should not be combined into one button. Buttons are always right-aligned.

Buttons are sorted from frequently-used to seldom-used. This ensures that the most important buttons will go into the overflow last.

Design

    <fdp-footer-toolbar 
                        [id]="{{id}}"
			[title]="{{name}}"
                        [clickable]="{{true|false}}"
                        [disabled]="{{true|false}}"
                        [status]=="{{auto|info|solid|transparent}}"
                        [bgtype]=="{{clear|standard)}}"
			(click)="onFooterPress">
</fdp-footer-toolbar>

Property Bindings

id: string

id of the footer

title: string

title of the of bar

[clickable]="{{true|false}}"

the bar is clickable or not

[disabled]="{{true|false}}"

Bar is disabled or not.

[status]:Status

Defines Bar status.

export type Status = 'auto|info|solid|transparent';

[bgtype]:BackGroundType

Defines Bar BackGround.

export type BackGroundType = 'clear|standard';

Event Bindings

(click)="onFooterPress"

Fires when footer is clicked.

Two-Way Bindings

N/A

Content Projection

N/A

Interfaces and Types

Related Modules

---

i18n

Link to general support for i18n: Supporting internationalization in ngx/platform

Special Usecase: No

• fdp-footer-toolbar can be supported as:

<fdp-footer-toolbar 
                        [id]="{{id}}"
			i18n-title="@@title"
			title="name"
                        [clickable]="{{true|false}}"
                        [disabled]="{{true|false}}"
                        [status]=="{{auto|info|solid|transparent}}"
                        [bgtype]=="{{clear|standard)}}"
			(click)="onFooterPress">
</fdp-footer-toolbar>

Redesign Required: No

Assuming that the buttons are explicitly written in the template, this component follows declarative approach.

---

Additional Notes

Are used along with this component.

Questions:

Kevin:

• Remove titleDirection and introTextDirection, 'RTL' should be handled internally by the component, ideally by CSS rules or alternatively using the RtlService-> Done