AppBar

The app bar contains essential items related to your application. It is used for branding with the logo, title with the app name, navigation and actions.

Menu, navigation, content and actions are slots where you can put customized content based on what your application requires.

We recommend to use global navigation templates if you need examples.

Usage

Import

npm i @finastra/app-bar

import '@finastra/app-bar';
...
<fds-app-bar
    appName="Example"
    logo="https://upload.wikimedia.org/wikipedia/fr/2/2f/Finastra.png">
</fds-app-bar>

API

Properties

| Property | Attribute | Type | Default | Description | |-------------------|-------------------|-----------|---------|----------------------------------------------| | appName | appName | string | "" | Application's name | | logoRedirectUri | logoRedirectUri | string | "" | Set the logo redirect Uri | | prominent | prominent | boolean | false | Extend the app bar | | transparent | transparent | boolean | false | Give a transparent background to the app bar |

Events

| Event | Description | |--------------------|--------------------------------------| | MDCTopAppBar:nav | Fired when clicking on burger button |

Slots

| Name | Description | |------------------|--------------------------------------------------| | actions | Slot to add content in the right side of the app bar | | content | Slot to add content in the center of the app bar | | navigation | Slot to add content in the left of the app bar, just after the app name or in the second line in prominent app bar | | navigationIcon | Slot to add a navigation icon (e.g. hamburger menu) |

CSS Custom Properties

| Property | Description | |--------------|------------------------------------------------| | --fds-logo | String representing an image encoded in base64 |