BottomNavigation
The bottom navigation bar component.
- Import
import "@tapsioss/web-components/bottom-navigation";
- Tag
<tapsi-bottom-navigation></tapsi-bottom-navigation>
Properties
Name | Description | Type | Default Value |
---|---|---|---|
label | Defines a string value that can be used to set a label for assistive technologies. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label | string | - |
Slots
Name | Description |
---|---|
- | The default slot for navigation items. |
TIP
You can use slot names as variables:
ts
import { Slots } from "@tapsioss/web-components/bottom-navigation";
console.log(Slots.DEFAULT); // ""
Events
Name | Description | Type |
---|---|---|
activechange | Fired when the items activation state changes (Bubbles). | ActiveChangeEvent |
TIP
You can import custom event names:
ts
import {
ActiveChangeEvent
} from "@tapsioss/web-components/bottom-navigation";
element.addEventListener(ActiveChangeEvent.type, handleTapsiBottomNavigationActiveChange);