menu-mobile-wrapper
v0.0.1arrow_drop_downv0.0.1
STATUS
Passing
DOWNLOADS
8
VISIBILITY
Public
PUBLISHED
4 years ago
SIZE
19 KB
1 contributor
Like
Install menu-mobile-wrapper as a package?
Copied
npm i @bit/ace.component_library.menu-mobile-wrapper
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.cloud
Component Example
React
React
Vue
Angular
React Native
Add dependency... help_outline
Just
and packages in Bit or NPM to the example. any of the 1 million componentstoggle layout
modifieddraft
chevron_left
chevron_right
Properties
Name | Type | Default value |
---|---|---|
renderStructure | function | (menu, secondary = true) => {
// eslint-disable-next-line react-hooks/rules-of-hooks
const [menuOpen, setOpen] = useState(false)
return <>
<AceIconMenu
menuOpen={menuOpen}
secondary={secondary}
src={'http://pr.aceteam.tech/47031/static/icons/menu.svg'}
alt={'Hamburger menu icon'}
onClick={()=>setOpen(true)}/>
<AceHiddenMenu open={menuOpen} secondary={secondary}>
<AceIconClose
src={'http://pr.aceteam.tech/47031/static/icons/close.svg'}
secondary={secondary}
alt={'Cross close icon'}
onClick={()=>setOpen(false)}/>
{menu}
</AceHiddenMenu>
</>
} |
renderMenu | function | (index, page, secondary) => <AceMenuLinkMobile
key={index}
href={page.slug}
secondary={secondary}>{page.linkName}</AceMenuLinkMobile> |
pages | object | {
test1: {
linkName: 'Test Element 1',
slug: `/test_element_1`
},
test2: {
linkName: 'Test Element 2',
slug: `/test_element_2`
}
,
test3:{
linkName: 'Test Element 3',
slug: `/test_element_3`
}
,
test4: {
linkName: 'Test Element 4',
slug:`/test_element_4`
}
} |
router | object | { pathname: '/test_element_1' } |
secondary | bool | false |