KTabBar - farimarwat/KrossUi GitHub Wiki

🧭 KTabBar Component Documentation

A multiplatform (Android + iOS) composable tab bar for navigation between views.

🔹 Overview

Element Type Description
KTabBar Composable A customizable horizontal tab bar.

🧩 KTabBar

Definition:
A composable tab bar that allows users to switch between different views using tabs. Fully customizable in terms of colors and icons.

Parameters

Parameter Type Default Description
modifier Modifier Modifier Modifier for layout and styling.
tabs List<KTabItem> – List of tab items to be displayed.
selectedIndex Int – Index of the currently selected tab.
onTabClick (Int) -> Unit – Callback triggered when a tab is clicked.
colors KTabBarColors KTabBarDefaults.colors() Colors for background and selected/unselected content.

🧱 KTabItem

Represents a single tab item with a title and platform-specific icons.

Property Type Description
title String Text label for the tab.
androidIcon DrawableResource Icon resource for Android.
iosIcon String System icon name for iOS.

🎨 KTabBarColors

Defines color configuration for the tab bar.

Property Type Description
backgroundColor Color Background color of the tab bar.
selectedContentColor Color Color of content (text/icon) for selected tab.
unselectedContentColor Color Color of content (text/icon) for unselected tabs.

⚙️ KTabBarDefaults

Provides default color configurations for the tab bar.

colors(...)

Parameter Type Default Value Description
backgroundColor Color PlatformColors.systemBackground Background of the tab bar.
selectedContentColor Color PlatformColors.systemBlue Color of selected tab content.
unselectedContentColor Color PlatformColors.systemGray Color of unselected tab content.

Returns a KTabBarColors instance with specified or default values.

✅ Usage Example

var selectedTabIndex by remember { mutableStateOf(0) }

val tabs = listOf(
    KTabItem(
        title = "Home",
        androidIcon = Res.drawable.ic_home, // ✅ Android drawable
        iosIcon = "house.fill" // ✅ SF Symbol
    ),
    KTabItem(
        title = "Favourite",
        androidIcon = Res.drawable.ic_star,
        iosIcon = "star.fill"
    ),
    KTabItem(
        title = "Settings",
        androidIcon = Res.drawable.ic_settings,
        iosIcon = "gearshape.fill"
    )
)

KTabBar(
    modifier = Modifier.fillMaxWidth(),
    tabs = tabs,
    selectedIndex = selectedTabIndex,
    onTabClick = { index ->
        selectedTabIndex = index
        println("Selected Tab Index: $index")
    },
    colors = KTabBarDefaults.colors(
        selectedContentColor = PlatformColors.systemRed,
        unselectedContentColor = PlatformColors.systemGray
    )
)

🔹 Note:

  • KTabItem defines each tab with a title, iosIcon (SF Symbol), and androidIcon (drawable).
  • selectedIndex keeps track of the active tab.
  • Use KTabBarDefaults.colors(...) to customize selected/unselected colors.
  • Works natively across Android and iOS with appropriate icons.
⚠️ **GitHub.com Fallback** ⚠️