
NavigationBarItem组件的导航栏。
- **用法**
- 属性
复制
询问AI
import { IconHome, IconUser, IconSettings } from '@tabler/icons-react';
import { NavigationBar } from "@/ui/navigation/navigation-bar/components/NavigationBar";
export const MyComponent = () => {
const navigationItems = [
{
name: "Home",
Icon: IconHome,
onClick: () => console.log("Home clicked"),
},
{
name: "Profile",
Icon: IconUser,
onClick: () => console.log("Profile clicked"),
},
{
name: "Settings",
Icon: IconSettings,
onClick: () => console.log("Settings clicked"),
},
];
return <NavigationBar activeItemName="Home" items={navigationItems}/>;
};
| 属性 | 类型 | 描述 |
|---|---|---|
| activeItemName | 字符串 | 当前活跃导航项的名称 |
| 项目 | 数组 | 表示每个导航项目的对象数组。 每个对象包含项目的名称、显示的图标组件以及项目被点击时调用的onClick函数 |