SegmentedViewItem

Represents a single item in a segmented view component.

• Import

  import "@tapsioss/web-components/segmented-view";

• Tag

  <tapsi-segmented-view-item></tapsi-segmented-view-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	""
size	The size of the item.	"sm" | "md"	"md"
controls	Identifies the element whose contents or presence are controlled by this item. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tabpanel_role	string	""

Slots

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

TIP

You can use slot names as variables:

import { ItemSlots } from "@tapsioss/web-components/segmented-view";

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/segmented-view";

element.addEventListener(ActivateEvent.type, handleTapsiSegmentedViewItemActivate);