Platform: Action Bar Component Technical Design

Action Bar

Summary

The Action Bar is a header which is located at the top of the page and contains the page title, as well as any action buttons associated with the page.

Example

<fdp-action-bar
    title="Main Title"
    description="Action bar description."
    showBackButton="true"
    [backButtonLabel]="'Go Back'"
    (backButtonClick)="onBackButtonClick()">
    <fdp-action-button-group>
        <fdp-button>Save</fdp-button>
        <fdp-button>Cancel</fdp-button>
    </fdp-action-button-group>
</fdp-action-bar>

Property Bindings

title: String

Title for action bar.

description: String

Action bar description. The description field is optional, and will not be displayed if empty.

showBackButton: Boolean

Show/hide the action bar back button.

backButtonLabel: String

Label for back button which appears as tooltip on hover, and is used in aria-label for accessibility.

Event Bindings

backButtonClick

This event is fired on click of "back" button.

Content Projection

fdp-action-button-group

A component placeholder for display of action buttons. Can contain one or more buttons/dropdown buttons.

See Platform: Action Button Group Component Technical Design

Component Template

The template for this component should utilize the Fundamental Styles example for Action Bar.

<div class="fd-action-bar">
    <div class="fd-action-bar__back" *ngIf="showBackButton">
        <button type="button" [attr.aria-label]="{{backButtonLabel}}" class="fd-button fd-button--light fd-button--compact sap-icon--nav-back" (click)="onBackButtonClick()"></button>
    </div>
    <div class="fd-action-bar__header">
        <h3 class="fd-action-bar__title">{{title}}</h3>
        <p class="fd-action-bar__description" *ngIf="description">{{description}}</p>
    </div>
    <div class="fd-action-bar__actions">
        <ng-content selector="fdp-action-bar-actions"></ng-content>
    </div>
</div>

---

i18n

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

Special Usecase: No

• title can be supported with i18n-title
• description can be supported with i18n-description
• backButtonLabel can be supported with i18n-backButtonLabel and string binding with backButtonLabel="<custom-label>"

Redesign Required: No

fdp-action-button-group handles action items and overflow declaratively, so no changes are needed.

---