API do componente Popover

Importação

import-popover.ts

import {
  NuiHovercard,
  NuiHovercardTrigger,
  NuiPopover,
  NuiPopoverTrigger,
} from '@needless-ui/angular/popover';

Um popover nativo posicionado ao lado do elemento que o abriu.

NuiPopover: Propriedades
Nome	Tipo	Padrão	Descrição
`side`Input	`'top' \| 'bottom' \| 'start' \| 'end'`	`'bottom'`	O lado do gatilho em que ele abre. Muda de lado quando falta espaço.
`align`Input	`'start' \| 'center' \| 'end'`	`'start'`	Como ele se alinha ao gatilho ao longo desse lado.
`offset`Input	`number`	`8`	Distância entre o gatilho e o painel, em pixels.
`arrow`Input	`boolean`	`false`	Mostra uma seta que aponta para o gatilho.
`enter`Input	`NuiEnter`		Como ele entra em cena: `zoom`, `fade`, `drop`, `rise`, `unfold`, `flip`, `swing`, `slide` ou `none`.
`motion`Input	`NuiMotion`		A mola com que ele se move: `snappy`, `bouncy`, `jelly`, `elastic`, `lazy`, `mechanical` ou `none`.
`spring`Input	`NuiSpring`		Qualquer mola, no formato `{ stiffness, damping, mass }`, compilada para CSS em tempo de execução. Tem prioridade sobre `motion`.
`corners`Input	`NuiCorners`		O formato dos cantos: `round`, `squircle`, `bevel`, `scoop`, `notch` ou `square`.
`radius`Input	`NuiRadius`		O tamanho dos cantos: `none`, `small`, `medium`, `large` ou `full`.
`density`Input	`NuiDensity`		Quanto espaço ele ocupa: `compact`, `regular` ou `roomy`.
`openChange`Output	`boolean`		Emite quando ele abre ou fecha.
`show`Método	`(anchor: HTMLElement) => void`		Abre o popover ao lado de qualquer elemento.
`hide`Método	`() => void`		Fecha o popover.

Os inputs de personalização que você não definir seguem o atributo data-nui-* mais próximo. Veja o guia de personalização.

Um botão que abre e fecha um popover, com o popovertarget nativo.

NuiPopoverTrigger: Propriedades
Nome	Tipo	Padrão	Descrição
`nuiPopoverTrigger`Input	`NuiPopover`		O popover a ser aberto.

Um tooltip rico que descreve o seu gatilho.

NuiHovercard: Propriedades
Nome	Tipo	Padrão	Descrição
`side`Input	`'top' \| 'bottom' \| 'start' \| 'end'`	`'bottom'`	O lado do gatilho em que ele abre. Muda de lado quando falta espaço.
`align`Input	`'start' \| 'center' \| 'end'`	`'start'`	Como ele se alinha ao gatilho ao longo desse lado.
`offset`Input	`number`	`8`	Distância entre o gatilho e o card, em pixels.
`arrow`Input	`boolean`	`false`	Mostra uma seta que aponta para o gatilho.
`openDelay`Input	`number`	`500`	Milissegundos de hover antes de abrir. O foco do teclado o abre na hora.
`closeDelay`Input	`number`	`300`	Milissegundos antes de fechar, depois que o ponteiro sai.
`enter`Input	`NuiEnter`		Como ele entra em cena: `zoom`, `fade`, `drop`, `rise`, `unfold`, `flip`, `swing`, `slide` ou `none`.
`motion`Input	`NuiMotion`		A mola com que ele se move: `snappy`, `bouncy`, `jelly`, `elastic`, `lazy`, `mechanical` ou `none`.
`spring`Input	`NuiSpring`		Qualquer mola, no formato `{ stiffness, damping, mass }`, compilada para CSS em tempo de execução. Tem prioridade sobre `motion`.
`corners`Input	`NuiCorners`		O formato dos cantos: `round`, `squircle`, `bevel`, `scoop`, `notch` ou `square`.
`radius`Input	`NuiRadius`		O tamanho dos cantos: `none`, `small`, `medium`, `large` ou `full`.
`density`Input	`NuiDensity`		Quanto espaço ele ocupa: `compact`, `regular` ou `roomy`.
`openChange`Output	`boolean`		Emite quando ele abre ou fecha.
`show`Método	`(anchor: HTMLElement) => void`		Abre o hovercard ao lado de qualquer elemento.
`hide`Método	`() => void`		Fecha o hovercard.

Os inputs de personalização que você não definir seguem o atributo data-nui-* mais próximo. Veja o guia de personalização.

Mostra um hovercard com hover e com o foco do teclado, e o torna a descrição deste elemento.

NuiHovercardTrigger: Propriedades
Nome	Tipo	Padrão	Descrição
`nuiHovercardTrigger`Input	`NuiHovercard`		O hovercard a ser mostrado.