Popover Next
Import
import { Popover } from '@resultadosdigitais/tangram-components/next'
Properties
anchor
| Type | instanceOf | shape | string |
|---|
Description
Define o elemento de referência para o posicionamento do Popover.
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).
show
side
| Type | Enum of: |
|---|---|
| Default | 'bottom' |
Description
Define o lado em que o Popover 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: |
|---|---|
| Default | 'center' |
Description
Define o alinhamento do Popover 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 | Popover.defaultOffset |
Description
Define o deslocamento (em pixels) do Popover em relação ao elemento âncora.
dismissible
kind
| Type | Enum of: |
|---|---|
| Default | 'default' |
Description
Define a variação visual do Popover, podendo ser (a) 'default': estilo padrão e
(b) 'highlight': estilo de destaque.
width
maxWidth
closeLabelText
| Type | string |
|---|---|
| Default | Popover.translations.en.close |
Description
Define o texto a ser utilizado como label acessível para o botão "Fechar". Esse texto não é exibido na tela.
Valores predefinidos para inglês, português do Brasil e espanhol estão disponíveis em
Popover.translations.en.close, Popover.translations.ptBR.close e Popover.translations.es.close.
children
onToggle
| Type | func |
|---|---|
| Param | event React.SyntheticEvent - A origem do evento que acionou o callback. |
| Param | show boolean - Indica se o Popover pretende ser exibido (true) ou escondido (false). |
| Param | infos object - Informações adicionais. |
Description
Callback acionado quando o Popover pretende ser exibido ou escondido.
podendo ser (a) 'clickOutside': o usuário clicou fora do Popover (não inclui o elemento âncora),
(b) 'esc': o usuário pressionou ESC e (c) 'closeButton': o usuário clicou no botão "Fechar".
<PopoverTitle />
Import
import { PopoverTitle } from '@resultadosdigitais/tangram-components/next'
Properties
children
Feedback
Para reportar algum problema ou sugerir alterações, use nosso formulário de melhorias ou, se preferir, abra uma issue no nosso Github.