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, 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.