VerticalNav
Import
import { VerticalNav } from '@resultadosdigitais/tangram-components'
Properties
as
Type | node |
---|---|
Default | 'nav' |
Description
Set element type to be rendered for this component. By default it will be render a nav
element.
children
Type | node | func |
---|---|
Default | null |
Description
Sets the children which usually is a tree of <VerticalNav.Item />
selected
Type | number | string |
---|
Description
Sets the item selected passing the item id
. Used for Controlled component.
Set to an empty string ''
if you don't want any of the available item to be selected.
defaultSelected
Type | number | string |
---|
Description
Sets the item selected passing the item id
. Used for Uncontrolled component
expanded
Type | arrayOf(string | number) |
---|
Description
Sets an array of expanded ids item. Used for Controlled component.
defaultExpanded
Type | arrayOf(string | number) |
---|---|
Default | [] |
Description
Sets an array of expanded ids item. Used for Uncontrolled component
onSelect
Type | func |
---|---|
Param | event React.SyntheticEvent - The event source of the callback. |
Param | id number|string - The id from selected item. |
Description
Callback fired when some item is selected. Can be useful for controlled mode.
onExpand
Type | func |
---|---|
Param | event React.SyntheticEvent - The event source of the callback. |
Param | id number|string - The id from expanded item. |
Description
Callback fired when some item is expanded. Can be useful for controlled mode.
<VerticalNavItem />
Import
import { VerticalNavItem } from '@resultadosdigitais/tangram-components'
Properties
id
📍
Concerns | 📍 Required |
---|---|
Type | number | string |
Description
Sets the unique identifier for this item, used to handle when selected or expanded.
label
📍
children
selected
onClick
Type | func |
---|---|
Param | event React.SyntheticEvent - The event source of the callback. |
Description
Callback fired when item is clicked or on key down event.
<VerticalNavItemLabel />
Import
import { VerticalNavItemLabel } from '@resultadosdigitais/tangram-components'