<dy-tabs>
A tabs component that organizes content into multiple sections, allowing users to switch between different views. It supports centered alignment and provides event handling for tab changes.
Example
Loading...
<dy-tabs
style=${"width: 240px"}
.center=${true}
.value=${0}
.items=${ [ {"label":"Tab 1"}, {"label":"Tab 2"}, {"label":"Tab 3"} ] }
@change=${(evt) => evt.target.value = evt.detail}></dy-tabs>
API
Shadow DOM; Extends GemElement
Instance Properties
| Property(Attribute) | Reactive | Type |
|---|---|---|
center(center) |
Yes | boolean |
orientation(orientation) |
Yes | 'horizontal' | 'vertical' |
items |
Yes | TabItem[] |
value |
Yes | any |
change |
Emitter<any> |
Other
| Type | Value |
|---|---|
| Event | change |
| Part | tabs, tab, current, icon, marker, divider |