ui:design/com.pico.spatial.ui.design.windows/TabBar

TabBar

@Composable

fun TabBar(placement: TabBarPlacement, followViewpoints: Set<ViewPoint> = ViewPoint.All, content: TabBarScope.() -> Unit)

TabBar is a component shown at top or left or right of the window container.

Parameters

placement

Determines the placement of the TabBar. see TabBarPlacement

followViewpoints

The ViewPoints that the TabBar will follow.

content

The content of the TabBar.

Samples

import androidx.compose.foundation.clickable
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import com.pico.spatial.ui.design.Icon
import com.pico.spatial.ui.design.windows.TabBar
import com.pico.spatial.ui.design.windows.TabBarPlacement
import com.pico.spatial.ui.platform.ViewPoint

fun main() { 
   //sampleStart 
   val items by remember {
    mutableStateOf(
        listOf(
            ItemInfo("Home", R.drawable.ic_sample_listitem_leading, unreadCount = 99),
            ItemInfo("Favourite", R.drawable.ic_sample_listitem_leading, unreadCount = 0),
            ItemInfo("Settings", R.drawable.ic_sample_listitem_leading, unreadCount = 120),
            ItemInfo("Mine", R.drawable.ic_sample_listitem_leading, unreadCount = 9),
            ItemInfo("More", R.drawable.ic_sample_listitem_leading, unreadCount = -10),
        )
    )
}
var currentIndex by remember { mutableIntStateOf(0) }
TabBar(
    placement = TabBarPlacement.Top,
    followViewpoints = setOf(ViewPoint.Front, ViewPoint.Left),
) {
    items.forEachIndexed { index, item ->
        item(
            text = item.title,
            selected = currentIndex == index,
            modifier = Modifier.clickable { currentIndex = index },
            icon = null,
            unreadCount = item.unreadCount,
        )
    }
} 
   //sampleEnd
}