@finastra/icon-bar

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>

Events

Event	Type
selected	CustomEvent<{ index: any; }>