@finastra/icon-bar NPM

Icon Bar

The icon bar comprises a series of tabs that each link to a different content area or view.

Usage

Import

npm i @finastra/icon-bar

import '@finastra/icon-bar';
...
<fds-icon-bar>
  <fds-icon-bar-item data-tippy-content="Home" current icon="home" notification="2"></fds-icon-bar-item>
  <fds-icon-bar-item label="Account" data-tippy-content="Account" icon="credit_card"></fds-icon-bar-item>
  <fds-icon-bar-item label="Calendar" data-tippy-content="Calendar" icon="event" notification="1"></fds-icon-bar-item>
  <fds-icon-bar-item data-tippy-content="Settings" slot="footer" icon="settings"></fds-icon-bar-item>
</fds-icon-bar>

API

Properties

Property	Attribute	Type	Default	Description
`ariaHasPopup`		`AriaHasPopup`
`ariaLabel`		`string`
`buttonElement`		`HTMLElement`
`current`	`current`	`boolean`	false
`dense`	`dense`	`boolean`	false	Make the button smaller.
`disabled`	`disabled`	`boolean`	false	Make the button disabled.
`icon`	`icon`	`string`	"apps"	Icon used in the button.
`label`	`label`	`string`	""
`notification`	`notification`	`string`	""
`primary`	`primary`	`boolean`	false	Use the primary color.
`ripple`		`Promise<Ripple \\| null>`
`secondary`	`secondary`	`boolean`	false	Use the secondary color.

Methods

Method	Type
`blur`	`(): void`
`focus`	`(): void`
`getParent`	`(): IconBar`
`handleIconClick`	`(): void`
`renderIconButtons`	`(): TemplateResult<1>`
`renderLabel`	`(): TemplateResult<1>`
`showLabels`	`(): boolean`

fds-icon-bar

Properties

Property	Attribute	Type	Default	Description
`hideNotification`	`hideNotification`	`boolean`	false	Removes the notification on item click.
`showLabels`	`showLabels`	`boolean`	false	Show or hide the items labels.

Methods

Method	Type
`deselectOthers`	`(current: Node): void`
`dispatchSelectedEvent`	`(index: any): void`
`getItems`	`(): Node[]`
`onFooterSlotChanged`	`(): void`
`renderFooter`	`(): TemplateResult<1>`