SegmentedView

The segmented view component.

Importing

Web

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

React

import { SegmentedView } from "@tapsioss/react-components/SegmentedView";

Component Usage

Web

<tapsi-segmented-view></tapsi-segmented-view>

React

<SegmentedView />

Properties

Name	Description	Type	Default Value
label	Defines a string value that can be used to set a label for assistive technologies.	string	""

Slots

Name	Description
-	The default slot for segmented view items.

TIP

You can use slot names as variables:

Web

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

console.log(Slots.DEFAULT); // ""

React

import { SegmentedViewSlots } from "@tapsioss/react-components";

console.log(SegmentedViewSlots.DEFAULT); // ""

Events

Name	Description	Type
activechange	Fired when the items activation state changes (Bubbles).	ActiveChangeEvent

TIP

You can import custom event names:

Web

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

element.addEventListener(ActiveChangeEvent.type, handleTapsiSegmentedViewActiveChange);

React

import { 
  SegmentedViewActiveChangeEvent
} from "@tapsioss/react-components";


// ...

<SegmentedView
  onActiveChangeEvent={(e: SegmentedViewActiveChangeEvent) => {...}}
/>