Dropdown Next

UsageExamples
• API

Import

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

Properties

anchor

Type	instanceOf | shape | string

Description

Define o elemento de referência para o posicionamento do Dropdown. Aceita o id de um elemento (string), uma referência direta do React a um elemento do DOM (RefObject<HTMLElement>) ou o próprio nó do DOM (HTMLElement). O elemento âncora também atua como o gatilho principal para eventos de abertura do componente em seu modo não controlado.

show

Type	bool

Description

Controla a visibilidade do Dropdown (modo controlado).

defaultShow

Type	bool

Description

Define se o Dropdown deve iniciar visível por padrão (modo não controlado).

side

Type	Enum of: 'top' 'right' 'bottom' 'left'
Default	'bottom'

Description

Define o lado em que o Dropdown será posicionado em relação ao elemento âncora, podendo ser (a) 'top': topo do elemento âncora, (b) 'right': lado direito do elemento âncora, (c) 'bottom': parte inferior do elemento âncora e (d) 'left': lado esquerdo do elemento âncora,

alignment

Type	Enum of: 'left' 'center' 'right' 'top' 'bottom'
Default	'left'

Description

Define o alinhamento do Dropdown em relação ao lado (side) do posicionamento, podendo ser (a) 'left': alinhado a esquerda, (b) 'center': centralizado, (c) 'right': alinhado a direita, (d) 'top': alinhado ao topo e (e) 'bottom': alinhado na parte inferior.

Para os lados 'top' e 'bottom', apenas os alinhamentos 'left', 'center' e 'right' são permitidos. Para os 'left' e 'right', apenas os alinhamentos 'top', 'center' e 'bottom' são permitidos.

offset

Type	number
Default	Dropdown.defaultOffset

Description

Define o deslocamento (em pixels) do Dropdown em relação ao elemento âncora.

width

Type	string

Description

Define uma largura customizada para o Dropdown (em pixels). Aceita também o valor 'fit-anchor', que faz a largura do Dropdown igual à do elemento âncora.

maxWidth

Type	string

Description

Define uma largura máxima customizada para o Dropdown (em pixels).

maxHeight

Type	string

Description

Define a altura máxima do Dropdown.

loading

Type	bool
Default	false

Description

Exibe um indicador de carregamento, substituindo o conteúdo do Dropdown mesmo quando há children definidos.

keepMounted

Type	bool
Default	false

Description

Se true, mantém o Dropdown montado no DOM mesmo quando não está visível.

children

Type	node

Description

Filhos do Dropdown.

onToggle

Type	func
Param	event React.SyntheticEvent - A origem do evento que acionou o callback.
Param	show boolean - Indica se o Dropdown pretende ser exibido (true) ou escondido (false).
Param	infos object - Informações adicionais. infos.reason string - Razão para o acionamento do callback,

Description

Callback acionado quando o Dropdown pretende ser exibido ou escondido.

podendo ser (a) 'clickAnchor': o usuário clicou no elemento âncora, (b) 'clickItem': o usuário clicou em um item do Dropdown, (c) 'clickOutside': o usuário clicou fora do Dropdown (não inclui o elemento âncora) e (d) 'esc': o usuário pressionou ESC.

<DropdownBack />

Import

import { DropdownBack } from '@resultadosdigitais/tangram-components/next'

Properties

label

Type	string

Description

Define o rótulo, o texto principal exibido pelo componente. Se não estiver presente, o rótulo do DropdownItem que provocou a mudança de nível de navegação será automaticamente utilizado.

children

Type	node

Description

Filhos do componente, serão exibidos logo após o item de voltar.

<DropdownCheckbox />

Import

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

Properties

id

Type	string

Description

Atributo id do input checkbox do DropdownCheckbox.

value

Type	string

Description

Atributo value do input checkbox do DropdownCheckbox.

name

Type	string

Description

Atributo name do input checkbox do DropdownCheckbox.

checked

Type	bool

Description

Controla se o input checkbox do componente está selecionado (modo controlado).

defaultChecked

Type	bool

Description

Define se o input checkbox do componente deve iniciar selecionado por padrão (modo não controlado).

label 📍

Concerns	📍 Required
Type	string

Description

Define o rótulo, o texto principal exibido pelo componente.

auxiliaryText

Type	string

Description

Define o texto auxiliar.

truncate

Type	bool
Default	false

Description

Identifica que o rótulo e o texto auxiliar serão truncados quando excederem o tamanho horizontal disponível.

suffix

Type	node

Description

Conteúdo a será exibido no final do item.

disabled

Type	bool
Default	false

Description

Desabilita o item.

onChange

Type	func
Param	event React.SyntheticEvent - A origem do evento que acionou o callback.
Param	checked boolean - Indica se o input checkbox pretende ser

Description

Callback acionado quando o input checkbox do componente pretende ser selecionado ou não.

selecionado (true) ou não (false).

<DropdownDivider />

Import

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

<DropdownEmptyState />

Import

import { DropdownEmptyState } from '@resultadosdigitais/tangram-components/next'

Properties

children

Type	node

Description

Filhos do DropdownEmptyState.

<DropdownFooter />

Import

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

Properties

children

Type	node

Description

Filhos do DropdownFooter.

<DropdownGroup />

Import

import { DropdownGroup } from '@resultadosdigitais/tangram-components/next'

Properties

label 📍

Concerns	📍 Required
Type	node

Description

Define o rótulo do grupo.

collapsible

Type	bool
Default	false

Description

Define se o grupo é colapsável, isto é, se comporta semelhante ao componente Accordion.

collapsed

Type	bool

Description

Em caso de um grupo colapsável, controla a visibilidade do grupo, se está contraído ou expandido (modo controlado).

defaultCollapsed

Type	bool

Description

Em caso de um grupo colapsável, indica que o DropdownGroup deve iniciar contraído por padrão (modo não controlado).

children

Type	node

Description

Filhos do DropdownGroup. Geralmente um ou mais DropdownItem ou DropdownCheckbox.

onToggle

Type	func
Param	event React.SyntheticEvent - A origem do evento que acionou o callback.
Param	collapsed boolean - Indica se o DropdownGroup pretende ser contraído (true)

Description

Callback acionado quando o DropdownGroup pretende ser ccontaído ou expandido.

ou expandido (false).

<DropdownHeader />

Import

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

Properties

children

Type	node

Description

Filhos do DropdownHeader.

<DropdownItem />

Import

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

Properties

as

Type	elementType | string

Description

Define o tipo de elemento a ser renderizado para este componente. Por padrão, será renderizado um elemento <div />.

Se o componente tiver a propriedade href, será renderizado como um link <a /> independentemente do valor da propriedade as.

label 📍

Concerns	📍 Required
Type	string

Description

Define o rótulo, o texto principal exibido pelo componente.

auxiliaryText

Type	string

Description

Define o texto auxiliar.

truncate

Type	bool
Default	false

Description

Identifica que o rótulo e o texto auxiliar serão truncados quando excederem o tamanho horizontal disponível.

prefix

Type	node

Description

Conteúdo que será exibido no início do item.

suffix

Type	node

Description

Conteúdo a será exibido no final do item.

renderItem

Type	func

Description

Renderização customizada do conteúdo do item.

disabled

Type	bool
Default	false

Description

Desabilita o item.

selected

Type	bool
Default	false

Description

Indica se o item está selecionado.

danger

Type	bool
Default	false

Description

Indica se o item é visualmente perigoso, isto é, que o usuário deve executar sua ação com atenção.

keepShow

Type	bool
Default	false

Description

Indica se o Dropdown deve permanecer aberto quando o item for clicado.

hideBack

Type	bool
Default	false

Description

Em caso de navegação em níveis, quando o item possui filhos (children), indica que o botão de voltar não será exibido por padrão.

children

Type	node

Description

Filhos do item, serão convertidos em um nível adicional de navegação que será acessado assim que usuário clicar no item.

<DropdownItemAuxiliaryText />

Import

import { DropdownItemAuxiliaryText } from '@resultadosdigitais/tangram-components/next'

Properties

children

Type	node

Description

Conteúdo do componente, geralmente uma string para o texto auxiliar do DropdownItem.

Se o DropdownItemAuxiliaryText não possuir a propriedade children e estiver sendo utilizado para construir o conteúdo de um DropdownItem com a propriedade auxiliaryText definida, o valor desta propriedade auxiliaryText será automaticamente utilizada como valor para o conteúdo do DropdownItemAuxiliaryText.

<Button id="menu">Menu</Button>
<Dropdown anchor="menu">
  <Dropdown.Item
    label="Configuration"
    auxiliaryText="Configuration options"
    renderItem={() => (
      <Dropdown.Item.Heading>
        <Dropdown.Item.Label />
        <Dropdown.Item.AuxiliaryText />
      </Dropdown.Item.Heading>
    )}
  />
</Dropdown>

<DropdownItemHeading />

Import

import { DropdownItemHeading } from '@resultadosdigitais/tangram-components/next'

Properties

children

Type	node

Description

Conteúdo do componente, geralmente os componentes DropdownItemLabel e DropdownItemAuxiliaryText.

<Button id="menu">Menu</Button>
<Dropdown anchor="menu">
  <Dropdown.Item
    label="Configuration"
    auxiliaryText="Configuration options"
    renderItem={() => (
      <Dropdown.Item.Heading>
        <Dropdown.Item.Label />
        <Dropdown.Item.AuxiliaryText />
      </Dropdown.Item.Heading>
    )}
  />
</Dropdown>

<DropdownItemLabel />

Import

import { DropdownItemLabel } from '@resultadosdigitais/tangram-components/next'

Properties

children

Type	string

Description

Conteúdo do componente, uma string para o rótulo do DropdownItem.

Se o DropdownItemLabel não possuir a propriedade children e estiver sendo utilizado para construir o conteúdo de um DropdownItem com a propriedade label definida, o valor desta propriedade label será automaticamente utilizada como valor para o conteúdo do DropdownItemLabel.

<Button id="menu">Menu</Button>
<Dropdown anchor="menu">
  <Dropdown.Item
    label="Configuration"
    renderItem={() => (
      <Dropdown.Item.Heading>
        <Dropdown.Item.Label />
      </Dropdown.Item.Heading>
    )}
  />
</Dropdown>

<DropdownItemPrefix />

Import

import { DropdownItemPrefix } from '@resultadosdigitais/tangram-components/next'

Properties

children

Type	node

Description

Conteúdo do componente, geralmente o conteúdo a ser exibido no início do DropdownItem.

Se o DropdownItemPrefix não possuir a propriedade children e estiver sendo utilizado para construir o conteúdo de um DropdownItem com a propriedade prefix definida, o valor desta propriedade prefix será automaticamente utilizada como valor para o conteúdo do DropdownItemPrefix.

<Button id="menu">Menu</Button>
<Dropdown anchor="menu">
  <Dropdown.Item
    label="Configuration"
    prefix={<Cog title="Cog icon" />}
    renderItem={
      <>
        <Dropdown.Item.Prefix />
        <Dropdown.Item.Heading>
          <Dropdown.Item.Label />
        </Dropdown.Item.Heading>
      </>
    }
  />
</Dropdown>

<DropdownItemSuffix />

Import

import { DropdownItemSuffix } from '@resultadosdigitais/tangram-components/next'

Properties

children

Type	node

Description

Conteúdo do componente, geralmente o conteúdo a ser exibido no início do DropdownItem.

Se o DropdownItemSuffix não possuir a propriedade children e estiver sendo utilizado para construir o conteúdo de um DropdownItem com a propriedade suffix definida, o valor desta propriedade suffix será automaticamente utilizada como valor para o conteúdo do DropdownItemSuffix.

<Button id="menu">Menu</Button>
<Dropdown anchor="menu">
  <Dropdown.Item
    label="Configuration"
    suffix={<Tag>New</Tag>}
    renderItem={
      <>
        <Dropdown.Item.Heading>
          <Dropdown.Item.Label />
        </Dropdown.Item.Heading>
        <Dropdown.Item.Suffix />
      </>
    }
  />
</Dropdown>

<DropdownTitle />

Import

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

Properties

children 📍

Concerns	📍 Required
Type	node

Description

Conteúdo do componente, geralmente uma string para o título.

Feedback

To report a problem, request new icons, request new component use cases, ask questions, share suggestions, or report bugs, get in touch through our Slack channel #tangram-design-system.