NavigationPanel
className
string | undefined
closeButton
ReactNode
actions
ReactNode
logo
ReactNode
style
any
required
Base usage
() => {return (<div style={{ maxWidth: 256, height: 500 }}><NavigationPanelcloseButton={<NavigationPanel.CloseButtontext="Закрыть"onClick={() => console.log('click NavigationPanel.CloseButton')}/>}logo={<NavigationPanel.Logo src="/public/f5-logo.svg" />}><GroupedListoptions={[{id: 0,groupName: 'Monitoring',items: [{id: 0,header: 'Playground',icon: <GroupedList.Icon name="view-icon" fill="#3B425B" />,},{id: 1,header: 'Playground settings, API',icon: (<GroupedList.Icon name="configure-icon" fill="#3B425B" />),},],separator: 'top',},{id: 1,groupName: 'Development',items: [{id: 0,header: 'Data models',icon: <GroupedList.Icon name="cell-icon" fill="#3B425B" />,},{id: 1,header: 'Pipeline manager',icon: <GroupedList.Icon name="play-icon" fill="#3B425B" />,},{id: 2,header: 'Math models',icon: (<GroupedList.Icon name="function-icon" fill="#3B425B" />),},{id: 3,header: 'Rules',icon: (<GroupedList.Icon name="warning-icon" fill="#3B425B" />),},],separator: 'top',},{id: 2,groupName: 'Others',items: [{id: 0,header: 'Settings',icon: (<GroupedList.Iconname="settings-gear-icon"fill="#3B425B"/>),selected: true,},{id: 1,header: 'Documentation',icon: <GroupedList.Icon name="book-icon" fill="#3B425B" />,},{id: 2,header: 'Profile',icon: <GroupedList.Icon name="user-icon" fill="#3B425B" />,},],separator: 'top',},]}/></NavigationPanel></div>)}
Actions list
() => {return (<div style={{ maxWidth: 256 }}><NavigationPanelcloseButton={<NavigationPanel.CloseButtontext="Закрыть"onClick={() => console.log('click NavigationPanel.CloseButton')}/>}logo={<NavigationPanel.Logo src="/public/f5-logo.svg" />}actions={<NavigationPanel.Actions><Listoptions={[{id: 0,header: 'Open applications list',icon: (<GroupedList.Icon name="grater-icon" fill="#3B425B" />),separator: 'top',},]}/></NavigationPanel.Actions>}><GroupedListoptions={[{id: 0,groupName: 'Monitoring',items: [{id: 0,header: 'Playground',icon: <GroupedList.Icon name="view-icon" fill="#3B425B" />,},{id: 1,header: 'Playground settings, API',icon: (<GroupedList.Icon name="configure-icon" fill="#3B425B" />),},],separator: 'top',},{id: 1,groupName: 'Development',items: [{id: 0,header: 'Data models',icon: <GroupedList.Icon name="cell-icon" fill="#3B425B" />,},{id: 1,header: 'Pipeline manager',icon: <GroupedList.Icon name="play-icon" fill="#3B425B" />,},{id: 2,header: 'Math models',icon: (<GroupedList.Icon name="function-icon" fill="#3B425B" />),},{id: 3,header: 'Rules',icon: (<GroupedList.Icon name="warning-icon" fill="#3B425B" />),},],separator: 'top',},{id: 2,groupName: 'Others',items: [{id: 0,header: 'Settings',icon: (<GroupedList.Iconname="settings-gear-icon"fill="#3B425B"/>),selected: true,},{id: 1,header: 'Documentation',icon: <GroupedList.Icon name="book-icon" fill="#3B425B" />,},{id: 2,header: 'Profile',icon: <GroupedList.Icon name="user-icon" fill="#3B425B" />,},],separator: 'top',},]}/></NavigationPanel></div>)}
Opened(no close button)
() => {return (<div style={{ maxWidth: 256 }}><NavigationPanellogo={<NavigationPanel.Logo src="/public/f5-logo.svg" />}><GroupedListoptions={[{id: 0,groupName: 'Monitoring',items: [{id: 0,header: 'Playground',icon: <GroupedList.Icon name="view-icon" fill="#3B425B" />,},{id: 1,header: 'Playground settings, API',icon: (<GroupedList.Icon name="configure-icon" fill="#3B425B" />),},],separator: 'top',},{id: 1,groupName: 'Development',items: [{id: 0,header: 'Data models',icon: <GroupedList.Icon name="cell-icon" fill="#3B425B" />,},{id: 1,header: 'Pipeline manager',icon: <GroupedList.Icon name="play-icon" fill="#3B425B" />,},{id: 2,header: 'Math models',icon: (<GroupedList.Icon name="function-icon" fill="#3B425B" />),},{id: 3,header: 'Rules',icon: (<GroupedList.Icon name="warning-icon" fill="#3B425B" />),},],separator: 'top',},{id: 2,groupName: 'Others',items: [{id: 0,header: 'Settings',icon: (<GroupedList.Iconname="settings-gear-icon"fill="#3B425B"/>),selected: true,},{id: 1,header: 'Documentation',icon: <GroupedList.Icon name="book-icon" fill="#3B425B" />,},{id: 2,header: 'Profile',icon: <GroupedList.Icon name="user-icon" fill="#3B425B" />,},],separator: 'top',},]}/></NavigationPanel></div>)}