For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/v/0.6.0/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/v/0.6.0/llms-full.txt, and this page is available as Markdown at https://ifhover.github.io/leaf-ui/v/0.6.0/components/app-bar.md.
Leaf UI
  • 简体中文

      • 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="ghost"
          startIcon={<Menu size={18} />}
          aria-label={'菜单'}
        />
        <strong style={{ marginInlineEnd: 'auto' }}>Leaf workspace</strong>
        <Button
          variant="ghost"
          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 的主题和减少动画设置。