Cupertino Tabs

1npm install @openwebf/react-cupertino-ui

1import { useState } from 'react';
2import {
3  FlutterCupertinoTabBar,
4  FlutterCupertinoTabBarItem,
5  FlutterCupertinoIcon,
6  CupertinoIcons,
7} from '@openwebf/react-cupertino-ui';
8
9export function TabsExample() {
10  const [index, setIndex] = useState(0);
11
12  return (
13    <FlutterCupertinoTabBar currentIndex={index} onChange={(e) => setIndex(e.detail)}>
14      <FlutterCupertinoTabBarItem title="Home">
15        <FlutterCupertinoIcon type={CupertinoIcons.house_fill} />
16      </FlutterCupertinoTabBarItem>
17      <FlutterCupertinoTabBarItem title="Search">
18        <FlutterCupertinoIcon type={CupertinoIcons.search} />
19      </FlutterCupertinoTabBarItem>
20      <FlutterCupertinoTabBarItem title="Profile">
21        <FlutterCupertinoIcon type={CupertinoIcons.person_fill} />
22      </FlutterCupertinoTabBarItem>
23    </FlutterCupertinoTabBar>
24  );
25}