Bottom Navigationボトムナビゲーション

画面下部に配置するモバイルやタブレット向けのグローバルなタブナビゲーションです。

更新 2024/11/1

サンプル

BottomNavigation内で、BottomNavigationItemを連ねて使用します。最大5タブ程度が目安です。それ以上になる場合は、Drawerなど別のナビゲーションを検討してください。

import { BottomNavigation, BottomNavigationItem } from "@serendie/ui";

export function Sample() {
  return (
    <BottomNavigation>
      <BottomNavigationItem icon="texture" label="検索" />
      <BottomNavigationItem icon="texture" label="ホーム" isActive />
      <BottomNavigationItem icon="texture" label="トーク" dot />
      <BottomNavigationItem icon="texture" label="カレンダー" count={3} />
      <BottomNavigationItem icon="texture" label="アカウント" count={100} />
    </BottomNavigation>
  );
}

バリエーション

BottomNavigationItemにはEnable状態とActive状態があります。またNotificationBadgeを組み合わせて使用できます。

Default (Enable)

Active

With Badge (dot)

With Badge (number)

import { HBox, VBox } from "@/components/LayoutUtils";
import { BottomNavigationItem } from "@serendie/ui";

export function ItemSample() {
  return (
    <HBox>
      <VBox w="25%">
        <BottomNavigationItem label="ホーム" icon="texture" />
        <p>Default (Enable)</p>
      </VBox>
      <VBox w="25%">
        <BottomNavigationItem label="ホーム" icon="texture" isActive />
        <p>Active</p>
      </VBox>
      <VBox w="25%">
        <BottomNavigationItem label="ホーム" icon="texture" dot />
        <p>With Badge (dot)</p>
      </VBox>
      <VBox w="25%">
        <BottomNavigationItem label="ホーム" icon="texture" count={3} />
        <p>With Badge (number)</p>
      </VBox>
    </HBox>
  );
}