Stylish UI/com.segnities007.stylishui.components.organisms/StylishTabBar

StylishTabBar

fun StylishTabBar(tabs: List<String>, selectedIndex: Int, onSelectedChange: (Int) -> Unit, modifier: Modifier = Modifier, tabIcons: List<ImageVector>? = null, leadingContents: List<@Composable () -> Unit?>? = null, labelStyle: TextStyle = MaterialTheme.typography.labelLarge, containerColor: Color = MaterialTheme.colorScheme.surfaceContainer, selectedContainerColor: Color? = null, selectedContentColor: Color? = null, unselectedContainerColor: Color? = null, unselectedContentColor: Color? = null, enabled: Boolean = true, scrollState: ScrollState = rememberScrollState())

A horizontally scrollable row of tab-like chips for switching between views within a page. Each tab is rendered as a StylishChip with animated selection, making this a lightweight alternative to StylishConnectedSegmentedControl when the number of tabs is dynamic or exceeds the screen width.

Unlike StylishConnectedSegmentedControl, tabs are not visually connected — each chip has its own rounded outline and spacing.

Parameters

tabs

The tab labels to display.

selectedIndex

The zero-based index of the currently selected tab.

onSelectedChange

Called with the new index when a tab is tapped.

modifier

Modifier applied to the outer Row.

tabIcons

Optional icons for each tab, indexed to match tabs. When null or shorter than tabs, tabs without an icon show label only.

leadingContents

Optional custom leading content per tab, indexed to match tabs. When non-null, a non-null entry at an index takes precedence over tabIcons and is rendered in place of the icon; a null entry falls back to tabIcons, then to label only.

labelStyle

TextStyle for each tab label, forwarded to StylishChip. Defaults to MaterialTheme.typography.labelLarge.

containerColor

Background color of the tab bar surface. Defaults to MaterialTheme.colorScheme.surfaceContainer.

selectedContainerColor

Container color of the selected tab. When null, StylishChip's default is used.

selectedContentColor

Content color of the selected tab. When null, StylishChip's default is used.

unselectedContainerColor

Container color of unselected tabs. When null, StylishChip's default is used.

unselectedContentColor

Content color of unselected tabs. When null, StylishChip's default is used.

enabled

When false, every tab is disabled: chips ignore pointer input and render in their disabled colors. Defaults to true.

scrollState

The ScrollState of the tab row. When selectedIndex changes, the row animates to scroll the selected tab into view.

Selection feedback relies on the StylishChip color animation — there is deliberately no sliding indicator, since each chip already animates its container/content colors (see com.segnities007.stylishui.components.atoms.StylishChip). Tab icons are decorative and carry no content description.

Accessibility

Selection, enabling, and disabled semantics are provided by the underlying StylishChip. The auto-scroll that brings the selected tab into view snaps instead of animating when the system reduced-motion setting is active (see isStylishReducedMotionEnabled).

StylishTabBar

Parameters

Accessibility

See also