Tabs

A component providing a navigation mechanism to allow users to switch between different sections or views of an application.

Code Example

import { TabBar, TabBarItem } from "@coconut-xr/apfel-kruemel";
import { Text } from "@coconut-xr/koestlich";
import { BoxSelect } from "@coconut-xr/lucide-koestlich";

export default function TabBar() {
  return (
    <TabBar defaultValue={1}>
        <TabBarItem value={1} icon={<BoxSelect />}>
            <Text>Label</Text>
        </TabBarItem>
        <TabBarItem value={2} icon={<BoxSelect />}>
            <Text>Label</Text>
        </TabBarItem>
        <TabBarItem value={3} icon={<BoxSelect />}>
            <Text>Label</Text>
        </TabBarItem>
        <TabBarItem value={4} icon={<BoxSelect />}>
            <Text>Label</Text>
        </TabBarItem>
    </TabBar>
  );
}

Sandbox

Params

Tab Bar

Name	Type	Attributes	Description
value	T	optional	The current selected tab of the tab bar
defaultValue	T	optional	The default selected tab of the tab bar
onValueChange	(value: T) => void	optional	Callback fired when the value is changed

Tab Bar Item

Name	Type	Attributes	Description
value	T	optional	The value of the tab bar item
icon	ReactNode	optional	An icon displayed at the front of the tab bar item