For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/llms-full.txt, and this page is available as Markdown at https://ifhover.github.io/leaf-ui/components/app-bar.md.
Leaf UIReact 组件库
GitHub

AppBar 应用导航

组织应用顶部和底部的导航。

基础用法

basic.tsx
import { AppBar, Button, Toolbar } from '@ifhover/leaf-ui';

import { Menu, Search } from 'lucide-react';

export function AppBarBasic() {
  return (
    <AppBar elevation>
      <Toolbar>
        <Button
          variant="soft"
          startIcon={<Menu size={18} />}
          aria-label={'菜单'}
        />
        <strong style={{ marginInlineEnd: 'auto' }}>Leaf workspace</strong>
        <Button
          variant="soft"
          startIcon={<Search size={18} />}
          aria-label={'搜索'}
        />
        <Button size="sm">{'新建'}</Button>
      </Toolbar>
    </AppBar>
  );
}

底部导航

basic.tsx
import { BottomNavigation } from '@ifhover/leaf-ui';

import { Home, Settings, User } from 'lucide-react';

import { useState } from 'react';

export function AppBarNavigation() {
  const [value, setValue] = useState('home');
  return (
    <BottomNavigation
      style={{ width: '100%', maxWidth: 560 }}
      aria-label={'工作区导航'}
      value={value}
      onChange={setValue}
      items={[
        { key: 'home', label: '首页', icon: <Home size={20} /> },
        { key: 'profile', label: '个人资料', icon: <User size={20} /> },
        { key: 'settings', label: '设置', icon: <Settings size={20} /> },
      ]}
    />
  );
}

AppBar API

属性类型默认值说明
position'static' | 'sticky' | 'fixed''static'导航栏定位方式。
elevationboolean—展示导航栏阴影。

Toolbar API

属性类型默认值说明
denseboolean—使用紧凑的工具栏。

BottomNavigationItem

属性类型默认值说明
keystring—必需。稳定且唯一的标识。
labelReactNode—必需。展示文字或内容。
iconReactNode—图标内容。
disabledboolean—禁用交互。
hrefstring—链接目标。

BottomNavigation API

属性类型默认值说明
itemsreadonly BottomNavigationItem[]—必需。展示的条目。
valuestring—受控值。
defaultValuestring''初始值；非受控模式支持表单重置。
onChange(value: string) => void—值发生变化时调用。
showLabelsbooleantrue始终展示底部导航文字。
linkRender( item: BottomNavigationItem, props: AnchorHTMLAttributes<HTMLAnchorElement>, ) => ReactNode—接入路由链接时保留传入的可访问性和事件属性。

类型与交互

组装可复用配置时，可导入对应的属性和数据类型。

import type { AppBarProps, ToolbarProps, BottomNavigationItem, BottomNavigationProps } from '@ifhover/leaf-ui';

为仅展示图标的操作提供可访问名称。交互控件支持键盘操作，并跟随 ConfigProvider 的主题和减少动画设置。