BottomNavigationItem

Represents a single item in a bottom navigation bar.

• Import

  import "@tapsioss/web-components/bottom-navigation";

• Tag

  <tapsi-bottom-navigation-item></tapsi-bottom-navigation-item>

Properties

Name	Description	Type	Default Value
active	Indicates whether the item is active or not.	boolean	false
value	The value associated with the item. This value has to be unique among sibling items.	string	""

Slots

Name	Description
icon	The slot for the icon element.
-	The default slot for the content/label.

TIP

You can use slot names as variables:

import { ItemSlots } from "@tapsioss/web-components/bottom-navigation";

console.log(ItemSlots.ICON); // "icon"
console.log(ItemSlots.DEFAULT); // ""

Events

Name	Description	Type
activate	Fired when the item activates (Bubbles).	ActivateEvent

TIP

You can import custom event names:

import { 
  ActivateEvent
} from "@tapsioss/web-components/bottom-navigation";

element.addEventListener(ActivateEvent.type, handleTapsiBottomNavigationItemActivate);