MobileNav

移动应用的侧边导航抽屉。

导入

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

基础用法

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

function App() {
  const [isOpen, setIsOpen] = useState(false)

  const navItems = [
    { label: 'Home', icon: Home, path: '/' },
    { label: 'Profile', icon: User, path: '/profile' },
    { label: 'Settings', icon: Settings, path: '/settings' }
  ]

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Open Menu</button>
      <MobileNav
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        items={navItems}
      />
    </>
  )
}

属性

属性	类型	默认值	描述
isOpen	boolean	必需	导航是否打开
onClose	() => void	必需	关闭处理器
items	NavItem[]	必需	导航项
position	'left' | 'right'	'left'	侧边位置