Modal

UsoExemplos
• API

Import

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

Properties

aria-describedby

Type	string

Description

Gives the modal an accessible name by referring to the element that provides the modal title.

aria-labelledby

Type	string

Description

Gives the modal an accessible description by referring to the modal content that describes the primary message or purpose.

children

Type	node
Default	null

Description

Sets the children.

cardComponent

Type	elementType

Description

Sets the custom Card component.

disableEscapeKeyDown

Type	bool
Default	false

Description

Sets if close pressing ESC key is disabled.

disableOutsideClick

Type	bool
Default	false

Description

Sets if close in outside click is disabled.

hideOverlay

Type	bool
Default	false

Description

Sets if the overlay is hidden (not rendered).

onClose

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

Description

Callback fired when the Modal is closed.

onEscapeKeyDown

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

Description

Callback fired when the ESC key is pressed.

onOutsideClick

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

Description

Callback fired when a click outside is triggered.

open

Type	bool
Default	false

Description

Sets if is open.

unmounted

Type	bool
Default	false

Description

Doesn't keep the Modal mounted (present in the DOM) when it's closed.

<ModalActions />

Import

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

Properties

children 📍

Concerns	📍 Required
Type	node

Description

Sets the children. Should be one of <Button /> OR one <ButtonGroup />.

<ModalBanner />

Import

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

Properties

children 📍

Concerns	📍 Required
Type	node

Description

Sets the children. Should be an image, either svg or img tag.

caption 📍

Concerns	📍 Required
Type	string

Description

Sets the image caption.

<ModalHeader />

Import

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

Properties

children

Type	node
Default	null

Description

Sets the children.

<ModalSteps />

Import

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

Properties

startsAt

Type	number
Default	0

Description

Sets the first index to be rendered.

render 📍

Concerns	📍 Required
Type	func
Param	props Object - The props that will be passed to the inner component. props.current number - The current step index. props.total number - The total of steps. props.next Function - Function that triggers the render of the next step. props.prev Function - Function that triggers the render of the previous step.

Description

Function responsible for rendering the multiple Modal steps.

total 📍

Concerns	📍 Required
Type	number

Description

Sets the total of steps.

Feedback

Para reportar algum problema, solicitar novos ícones, solicitar novos casos de uso de componentes, tirar dúvidas, enviar sugestões ou reportar bugs, entre em contato pelo nosso canal no Slack #tangram-design-system.