Tabs
Windows Tabs
Tabs
Windows Tabs
Basic Usage
Tabs
Demo loads on client.
Indicator Showcase
Indicator variants & motions
Demo loads on client.
Dynamic Content Size (manual, rich content)
Dynamic Content (manual)
Demo loads on client.
Layout Direction (placement)
Placement + Header Slot
Demo loads on client.
Height Follows Content (animation.size)
Auto Size (contentScrollable=false)
Demo loads on client.
Closing Animations (indicator/content)
Disable Animations
Demo loads on client.
API
TxTabs Props
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | string | - | Description for modelValue. |
defaultValue | string | - | Description for defaultValue. |
placement | 'left' | 'right' | 'top' | 'bottom' | 'left' | Tabs LayoutPosition |
offset | number | 0 | Description for offset. |
navMinWidth | number | 220 | Description for navMinWidth. |
navMaxWidth | number | 320 | Description for navMaxWidth. |
contentPadding | number | 12 | Description for contentPadding. |
contentScrollable | boolean | true | Description for contentScrollable. |
autoHeight | boolean | false | Description for autoHeight. |
autoWidth | boolean | false | Description for autoWidth. |
indicatorVariant | 'line' | 'pill' | 'block' | 'dot' | 'outline' | 'line' | Description for indicatorVariant. |
indicatorMotion | 'stretch' | 'warp' | 'glide' | 'snap' | 'spring' | 'stretch' | Description for indicatorMotion. |
indicatorMotionStrength | number | 1 | Description for indicatorMotionStrength. |
animation | TabsAnimation | - | Description for animation. |
animation.size | boolean | { enabled?; durationMs?; easing? } | - | ContentTextSizeText（TextContent，Text contentScrollable=false Text）。Text autoHeight* |
animation.nav | boolean | { enabled?; durationMs?; easing? } | - | TextContainerText（nav Text/LayoutText） |
animation.indicator | boolean | { enabled?; durationMs?; easing? } | - | Description for animation.indicator. |
animation.content | boolean | { enabled? } | - | ContentText（zoom Text） |
autoHeight | boolean | false | Description for autoHeight. |
autoHeightDurationMs | number | 250 | Description for autoHeightDurationMs. |
autoHeightEasing | string | ease | Description for autoHeightEasing. |
Slots
| Name | Params | Description |
|---|---|---|
default | - | Description for default. |
nav-right | - | Description for nav-right. |
Expose
| Name | Type | Description |
|---|---|---|
refresh | () => void | Description for refresh. |
flip | (action: () => void | Promise<void>) => Promise<void> | TextUsage FLIP SizeText |
action | (fn: (el: HTMLElement) => void | Promise<void>, optionsOrDetect?: any) => Promise<any> | AutoSizer Text action wrapper（Text） |
size | () => { width: number; height: number } | undefined | TextSizeText |
TxTabItem Props
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | - | Description for name. |
iconClass | string | '' | Description for iconClass. |
disabled | boolean | false | Description for disabled. |
activation | boolean | false | Description for activation. |
Events
| Event | Params | Description |
|---|---|---|
change | string | Description for change. |
update:modelValue | string | Description for update:modelValue. |
Was this helpful?