Dropdown

UsageExamples
• Code

Import

import { Dropdown } from '@resultadosdigitais/tangram-components'

Properties

children 📍

Concerns	📍 Required
Type	node | func

Description

Sets the children, which usually contains Dropdown.Container, Dropdown.Header and Dropdown.Footer.

renderAnchor

Type	func
Param	anchorRef React.Dispatch - Reference that must be passed to the ref property of the anchor component that will be rendered.
Param	toggle Function - Function that opens and closes the Dropdown in the uncontrolled version.

Description

Function responsible for rendering the Dropdown anchor.

defaultOpen

Type	bool

Description

Responsible for controlling if Dropdown will be rendered opened or closed in the uncontrolled version.

anchorEl

Type	instance of Element

Description

Sets the anchor element (html element). Only used in the controlled version.

open

Type	bool

Description

Controls whether Dropdown will be rendered opened in the controlled version.

position

Type	Enum of: Dropdown.positions.top Dropdown.positions.topStart Dropdown.positions.topEnd Dropdown.positions.right Dropdown.positions.rightStart Dropdown.positions.rightEnd Dropdown.positions.left Dropdown.positions.leftStart Dropdown.positions.leftEnd Dropdown.positions.bottom Dropdown.positions.bottomStart Dropdown.positions.bottomEnd
Default	Dropdown.positions.bottomStart

Description

Determines the position of Dropdown relative to the anchor element.

deprecated values:

• Dropdown.positions.top,
• Dropdown.positions.right,
• Dropdown.positions.bottom,
• Dropdown.positions.left

offset

Type	number | string
Default	sizeSpacing01

Description

Sets the distance between the Dropdown and the anchor element. Use as a number or a string with unit px.

onClickOutside

Type	func
Param	event React.SyntheticEvent - The event source of the callback.

Description

Callback triggered when the Dropdown is open and outside of dropdown is clicked.

onEscape

Type	func
Param	event React.SyntheticEvent - The event source of the callback.

Description

Callback triggered when the Dropdown is opened and ESC key is pressed.

onKeyDown

Type	func
Param	event React.SyntheticEvent - The event source of the callback.

Description

Callback triggered when the Dropdown is focused and any key is pressed.

onToggle

Type	func
Param	event React.SyntheticEvent - The event source of the callback.
Param	open boolean - Dropdown open state.
Param	infos object - Additional information about component status. infos.reason string - The reason to toggle the Dropdown. Can be Dropdown.reasonsToToggle.escape, Dropdown.reasonsToToggle.clickOutside, Dropdown.reasonsToToggle.clickItem or Dropdown.reasonsToToggle.clickAnchor.

Description

Callback triggered when the Dropdown requests to be closed or opened.

unfocused

Type	bool
Default	false

Description

Controls whether Dropdown will mount without focus.

keepMounted

Type	bool
Default	false

Description

Sets if the Dropdown will be always mounted after the first mount. It can be useful for SEO.

anchorId 🗑️

Concerns	🗑️ Deprecated: - `Dropdown` from now on will use the trigger id automatically.
Type	string | number

Description

Sets the id used to connect accessibly Dropdown with anchor element. The id value is used in aria-labelledby.

focused 🗑️

Concerns	🗑️ Deprecated: - Use `unfocused` property instead.
Type	bool
Default	true

Description

Sets if Dropdown will mount with focus or not.

<DropdownAnchor />

Import

import { DropdownAnchor } from '@resultadosdigitais/tangram-components'

Properties

children

Type	node

Description

Sets the children.

<DropdownCheckbox />

Import

import { DropdownCheckbox } from '@resultadosdigitais/tangram-components'

Properties

auxiliaryText

Type	string
Default	''

Description

Sets the auxiliary text.

defaultChecked

Type	bool
Default	false

Description

Sets the Checkbox checked by default. Used for uncontrolled component.

disabled

Type	bool
Default	false

Description

Disables the Dropdown.Checkbox.

label 📍

Concerns	📍 Required
Type	string

Description

Sets the label.

truncate

Type	bool
Default	false

Description

Identifies that the label and the auxiliary text will be truncated when it exceeds the available size.

suffix

Type	node

Description

Sets a content to be displayed at the end of the item.

<DropdownContainer />

Import

import { DropdownContainer } from '@resultadosdigitais/tangram-components'

Properties

children

Type	node

Description

Sets the children.

renderEmptyState

Type	string | func

Description

Sets the text to be displayed when content not exists or is hidden. If you want to customize the renderization of this property, you must pass a component instead.

renderEmptyState="No items were found"
renderEmptyState={() => <MyComponent>No items were found</MyComponent>}

loading

Type	bool
Default	false

Description

Sets loading appearance.

<DropdownCustomItem />

Import

import { DropdownCustomItem } from '@resultadosdigitais/tangram-components'

Properties

as

Type	elementType | string
Default	'div'

Description

Set element type to be rendered for this component. By default it will be render a <div> element.

children 📍

Concerns	📍 Required
Type	node

Description

Sets the children.

disabled

Type	bool
Default	false

Description

Disables the Dropdown.CustomItem.

selected

Type	Error to identify property type
Default	false

Description

role

Type	Error to identify property type
Default	'menuitem'

Description

<DropdownDivider />

Import

import { DropdownDivider } from '@resultadosdigitais/tangram-components'

<DropdownFooter />

Import

import { DropdownFooter } from '@resultadosdigitais/tangram-components'

Properties

children

Type	node

Description

Sets the children.

<DropdownHeader />

Import

import { DropdownHeader } from '@resultadosdigitais/tangram-components'

Properties

children

Type	node

Description

Sets the children.

<DropdownItem />

Import

import { DropdownItem } from '@resultadosdigitais/tangram-components'

Properties

as

Type	elementType | string
Default	'div'

Description

Set element type to be rendered for this component. By default it will be render a <div> element.

If the component has the href prop, it will be render as a link <a> regardless of the value of as prop.

disabled

Type	bool
Default	false

Description

Disables the Dropdown.Item.

label 📍

Concerns	📍 Required
Type	string

Description

Sets the label, the main text displayed by the component.

auxiliaryText

Type	string

Description

Sets the auxiliary text.

danger

Type	bool
Default	false

Description

Indicates if the item is visually dangerous.

truncate

Type	bool
Default	false

Description

Identifies that the label and the auxiliary text will be truncated when it exceeds the available size.

selected

Type	bool
Default	false

Description

Indicates if the item is selected.

icon

Type	node

Description

Sets icon to be displayed at the beginning of the item.

suffix

Type	node

Description

Sets a content to be displayed at the end of the item.

<DropdownLevels />

Import

import { DropdownLevels } from '@resultadosdigitais/tangram-components'

Properties

rootLevel 📍

Concerns	📍 Required
Type	number | string

Description

Sets the first level to be rendered.

renderLevels 📍

Concerns	📍 Required
Type	func
Param	props Object - The props that will be passed to the inner component. props.level string|number - Returns the level to be rendered. props.goToLevel Function - Function that triggers the render of a specific level. A level name needs to be passed as argument. props.goBack Function - Function that triggers the last level render. props.toggle Function - Function that opens or closes the Dropdown.

Description

Function responsible to render the multiple Dropdown levels.

<DropdownNavigation />

Import

import { DropdownNavigation } from '@resultadosdigitais/tangram-components'

Properties

auxiliaryText

Type	string

Description

Sets the auxiliary text.

disabled

Type	bool
Default	false

Description

Disables the Dropdown.Navigation.

label 📍

Concerns	📍 Required
Type	string

Description

Sets the label.

<DropdownTitle />

Import

import { DropdownTitle } from '@resultadosdigitais/tangram-components'

Properties

children 📍

Concerns	📍 Required
Type	node

Description

Sets the children element

Feedback