@finastra/app-bar NPM

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)