menu-mobile-wrapper

v0.0.1arrow_drop_down
v0.0.1
STATUS
Passing
DOWNLOADS
8
VISIBILITY
Public
PUBLISHED
4 years ago
SIZE
19 KB
1 contributor
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
import
any of the 1 million components
and packages in Bit or NPM to the example.
import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';
toggle layout
modifieddraft
chevron_left
chevron_right
Properties
NameTypeDefault 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
boolfalse
Help and resources