
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 | 문자열 | 현재 활성화된 탐색 항목의 이름 |
| 항목 | 배열 | 각 탐색 항목을 나타내는 객체 배열입니다. 각 객체에는 항목의 name, 표시할 Icon 구성 요소 및 항목이 클릭될 때 호출되는 onClick 함수가 포함됩니다. |