Skip to content

Segmented View Compound

The segmented view component that makes exploring and switching between different views easy.

Importing

To use the segmented view component, first you need to register the component inside the page. You can register the component manually by importing the register function:

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

register(); // Now the segmented view component is ready to use!
ts
import { registerSegmentedView } from "@tapsioss/web-components";

registerSegmentedView(); // Now the segmented view component is ready to use!

Also you can automatically register the component by importing it with the following approach:

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

TIP

If you want to use all the component in your app, you can call registerAll at the root of your project.

ts
import { registerAll } from "@tapsioss/web-components";

registerAll(); // All the components are now available

INFO

By registering the segmented view component, its compound parts will also be registered:

  • tapsi-segmented-view-item

In the React package, you can easily add the component using the following code:

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

Component Usage

html
<tapsi-segmented-view></tapsi-segmented-view>
tsx
<SegmentedView />

Properties

NameAttribute NameDescriptionTypeDefault Value
labellabelDefines 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

NameValueDescription
DEFAULT-The default slot for segmented view items.

TIP

The value of slots are available for developer as JavaScript Variables:

ts
// Option 1
import { SegmentedViewSlots, SegmentedViewItemSlots } from "@tapsioss/web-components";

// Option 2
import { Slots, ItemSlots } from "@tapsioss/web-components/segmented-view";
ts
// Option 1
import { SegmentedViewSlots, SegmentedViewItemSlots } from "@tapsioss/react-components";

// Option 2
import { Slots, ItemSlots } from "@tapsioss/react-components/SegmentedView";

Events

NameDescriptionTypeBubblesCancelable
activechangeFired when the items activation state changes.ActiveChangeEvent

TIP

Event details are available as JavaScript variables:

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

// Option 2
import {
 SegmentedViewActiveChangeEvent
} from "@tapsioss/web-components";

You can have access to the event name using the type property:

ts
// Option 1
element.addEventListener(ActiveChangeEvent.type, handleActiveChange);

// Option 2
element.addEventListener(SegmentedViewActiveChangeEvent.type, handleActiveChange);

Compound Parts

Item

The item part of the segmented view.

Importing

By registering the parent component, the segmented view item will also be registered.

In the React package, you can easily add the component using the following code:

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

Component Usage

html
<tapsi-segmented-view-item></tapsi-segmented-view-item>
tsx
<SegmentedViewItem />

Properties

NameAttribute NameDescriptionTypeDefault Value
sizesizeThe size of the item."sm" | "md""md"
controlscontrolsIdentifies 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""
activeactiveIndicates whether the item is active or not.booleanfalse
valuevalueThe value associated with the item.
This value has to be unique among sibling items.
string""
tabIndex---

Slots

NameValueDescription
DEFAULT-The default slot for the content/label.

Created with 🧡