m3-baseui

TopAppBar

画面上部のアプリバー。small / center / medium / large のバリアントを提供します。

参考: Material Design 3 公式ガイドライン m3.material.io/components/app-bars/overview

Import

import { TopAppBar, ThemeProvider } from '@m3-baseui/react-tailwind';

使用例

<TopAppBar variant="center">
  ページタイトル
</TopAppBar>

Props

Prop型既定値説明
variant'small' | 'center' | 'medium' | 'large''small'App bar バリアント
childrenReactNode—ヘッドライン（タイトル）
leading / trailingReactNode—先頭・末尾アクション