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:
import { register } from "@tapsioss/web-components/segmented-view";
register(); // Now the segmented view component is ready to use!
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:
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.
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:
import { SegmentedView } from "@tapsioss/react-components";
Component Usage
<tapsi-segmented-view></tapsi-segmented-view>
<SegmentedView />
Properties
Name | Attribute Name | Description | Type | Default Value |
---|---|---|---|---|
label | 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 | Value | Description |
---|---|---|
DEFAULT | - | The default slot for segmented view items. |
TIP
The value of slots are available for developer as JavaScript Variables:
// Option 1
import { SegmentedViewSlots, SegmentedViewItemSlots } from "@tapsioss/web-components";
// Option 2
import { Slots, ItemSlots } from "@tapsioss/web-components/segmented-view";
// Option 1
import { SegmentedViewSlots, SegmentedViewItemSlots } from "@tapsioss/react-components";
// Option 2
import { Slots, ItemSlots } from "@tapsioss/react-components/SegmentedView";
Events
Name | Description | Type | Bubbles | Cancelable |
---|---|---|---|---|
activechange | Fired when the items activation state changes. | ActiveChangeEvent | ✅ | ❌ |
TIP
Event details are available as JavaScript variables:
// 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:
// 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:
import { SegmentedViewItem } from "@tapsioss/react-components";
Component Usage
<tapsi-segmented-view-item></tapsi-segmented-view-item>
<SegmentedViewItem />
Properties
Name | Attribute Name | Description | Type | Default Value |
---|---|---|---|---|
size | size | The size of the item. | "sm" | "md" | "md" |
controls | 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 | "" |
active | active | Indicates whether the item is active or not. | boolean | false |
value | value | The value associated with the item. This value has to be unique among sibling items. | string | "" |
tabIndex | - | - | - |
Slots
Name | Value | Description |
---|---|---|
DEFAULT | - | The default slot for the content/label. |