MobileTabbar

一个带有平滑动画和可自定义样式的移动底部导航标签栏组件。

导入

import { MobileTabbar } from '@xcloud/ui-mobile'

基础用法

import { MobileTabbar } from '@xcloud/ui-mobile'
import { Home, Search, User, Settings } from 'lucide-react'

function App() {
  const [activeTab, setActiveTab] = useState('home')

  const tabs = [
    { id: 'home', label: 'Home', icon: Home },
    { id: 'search', label: 'Search', icon: Search },
    { id: 'profile', label: 'Profile', icon: User },
    { id: 'settings', label: 'Settings', icon: Settings }
  ]

  return (
    <MobileTabbar
      tabs={tabs}
      activeTab={activeTab}
      onTabChange={setActiveTab}
    />
  )
}

与路由集成

import { MobileTabbar } from '@xcloud/ui-mobile'
import { useNavigate, useLocation } from '@tanstack/react-router'

function App() {
  const navigate = useNavigate()
  const location = useLocation()

  const tabs = [
    { id: 'home', label: 'Home', icon: Home, path: '/' },
    { id: 'search', label: 'Search', icon: Search, path: '/search' }
  ]

  return (
    <MobileTabbar
      tabs={tabs}
      activeTab={location.pathname}
      onTabChange={(_, tab) => navigate({ to: tab.path })}
    />
  )
}

自定义样式

<MobileTabbar
  tabs={tabs}
  activeTab={activeTab}
  onTabChange={setActiveTab}
  style={{
    '--tabbar-bg': '#ffffff',
    '--tabbar-active-color': '#646cff',
    '--tabbar-inactive-color': '#666666'
  }}
/>

属性

属性	类型	默认值	描述
tabs	TabItem[]	必需	要显示的标签项数组
activeTab	string	必需	当前活跃标签的 ID
onTabChange	(id: string, tab: TabItem) => void	必需	标签被点击时的回调
className	string	-	附加的 CSS 类名
style	CSSProperties	-	内联样式
showLabels	boolean	true	是否显示标签文本
variant	'default' | 'minimal'	'default'	视觉样式变体

TabItem 类型

interface TabItem {
  id: string
  label: string
  icon: LucideIcon
  path?: string
  badge?: number | string
  disabled?: boolean
}

功能特性

• 平滑的标签切换动画
• 可自定义的颜色和样式
• 移动端触摸优化
• 键盘可访问性
• 路由集成支持
• 通知徽章支持

样式

标签栏使用 CSS 变量进行主题设置：

.mobile-tabbar {
  --tabbar-height: 64px;
  --tabbar-bg: #ffffff;
  --tabbar-border-color: #e5e7eb;
  --tabbar-active-color: #646cff;
  --tabbar-inactive-color: #6b7280;
  --tabbar-label-size: 12px;
  --tabbar-icon-size: 24px;
}

无障碍访问

• 使用带有适当 ARIA 属性的语义 HTML
• 使用方向键和 Enter 键进行键盘导航
• 屏幕阅读器支持
• 焦点可见状态

示例

带徽章

const tabs = [
  { id: 'home', label: 'Home', icon: Home },
  { id: 'messages', label: 'Messages', icon: Mail, badge: 3 },
  { id: 'notifications', label: 'Notifications', icon: Bell, badge: '!' }
]

最小化变体

<MobileTabbar
  tabs={tabs}
  activeTab={activeTab}
  onTabChange={setActiveTab}
  variant="minimal"
  showLabels={false}
/>

相关组件

• MobileHeader - 顶部导航栏
• MobileNav - 侧边导航抽屉
• DesktopSidebar - 桌面端侧边栏导航