API del componente Popover

Importación

import-popover.ts

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

NuiPopover

Un popover nativo colocado junto al elemento que lo abrió.

Selector: [nuiPopover]
Exportado como: nuiPopover

NuiPopover: Propiedades
Nombre	Tipo	Predeterminado	Descripción
`side`Input	`'top' \| 'bottom' \| 'start' \| 'end'`	`'bottom'`	El lado del disparador en el que se abre. Cambia al opuesto si no hay espacio.
`align`Input	`'start' \| 'center' \| 'end'`	`'start'`	Cómo se alinea con el disparador a lo largo de ese lado.
`offset`Input	`number`	`8`	Separación entre el disparador y el panel, en píxeles.
`arrow`Input	`boolean`	`false`	Muestra una flecha que apunta al disparador.
`enter`Input	`NuiEnter`		Cómo entra en escena: `zoom`, `fade`, `drop`, `rise`, `unfold`, `flip`, `swing`, `slide` o `none`.
`motion`Input	`NuiMotion`		El resorte con el que se mueve: `snappy`, `bouncy`, `jelly`, `elastic`, `lazy`, `mechanical` o `none`.
`spring`Input	`NuiSpring`		Cualquier resorte, en forma de `{ stiffness, damping, mass }`, compilado a CSS en tiempo de ejecución. Tiene prioridad sobre `motion`.
`corners`Input	`NuiCorners`		La forma de sus esquinas: `round`, `squircle`, `bevel`, `scoop`, `notch` o `square`.
`radius`Input	`NuiRadius`		El tamaño de sus esquinas: `none`, `small`, `medium`, `large` o `full`.
`density`Input	`NuiDensity`		Cuánto espacio ocupa: `compact`, `regular` o `roomy`.
`openChange`Output	`boolean`		Emite cuando se abre o se cierra.
`show`Método	`(anchor: HTMLElement) => void`		Lo abre junto a cualquier elemento.
`hide`Método	`() => void`		Lo cierra.

Los inputs de personalización que no definas siguen el atributo data-nui-* más cercano. Consulta la guía de personalización.

NuiPopoverTrigger

Un botón que abre y cierra un popover, con el popovertarget nativo.

Selector: button[nuiPopoverTrigger]

NuiPopoverTrigger: Propiedades
Nombre	Tipo	Predeterminado	Descripción
`nuiPopoverTrigger`Input	`NuiPopover`		El popover que se abre.

NuiHovercard

Un tooltip enriquecido que describe su disparador.

Selector: [nuiHovercard]
Exportado como: nuiHovercard

NuiHovercard: Propiedades
Nombre	Tipo	Predeterminado	Descripción
`side`Input	`'top' \| 'bottom' \| 'start' \| 'end'`	`'bottom'`	El lado del disparador en el que se abre. Cambia al opuesto si no hay espacio.
`align`Input	`'start' \| 'center' \| 'end'`	`'start'`	Cómo se alinea con el disparador a lo largo de ese lado.
`offset`Input	`number`	`8`	Separación entre el disparador y la tarjeta, en píxeles.
`arrow`Input	`boolean`	`false`	Muestra una flecha que apunta al disparador.
`openDelay`Input	`number`	`500`	Milisegundos con el puntero encima antes de abrirse. El foco del teclado la abre al instante.
`closeDelay`Input	`number`	`300`	Milisegundos antes de cerrarse, una vez que el puntero se ha ido.
`enter`Input	`NuiEnter`		Cómo entra en escena: `zoom`, `fade`, `drop`, `rise`, `unfold`, `flip`, `swing`, `slide` o `none`.
`motion`Input	`NuiMotion`		El resorte con el que se mueve: `snappy`, `bouncy`, `jelly`, `elastic`, `lazy`, `mechanical` o `none`.
`spring`Input	`NuiSpring`		Cualquier resorte, en forma de `{ stiffness, damping, mass }`, compilado a CSS en tiempo de ejecución. Tiene prioridad sobre `motion`.
`corners`Input	`NuiCorners`		La forma de sus esquinas: `round`, `squircle`, `bevel`, `scoop`, `notch` o `square`.
`radius`Input	`NuiRadius`		El tamaño de sus esquinas: `none`, `small`, `medium`, `large` o `full`.
`density`Input	`NuiDensity`		Cuánto espacio ocupa: `compact`, `regular` o `roomy`.
`openChange`Output	`boolean`		Emite cuando se abre o se cierra.
`show`Método	`(anchor: HTMLElement) => void`		La abre junto a cualquier elemento.
`hide`Método	`() => void`		La cierra.

Los inputs de personalización que no definas siguen el atributo data-nui-* más cercano. Consulta la guía de personalización.

NuiHovercardTrigger

Muestra una hovercard al pasar el puntero y con el foco del teclado, y la convierte en la descripción de este elemento.

Selector: [nuiHovercardTrigger]

NuiHovercardTrigger: Propiedades
Nombre	Tipo	Predeterminado	Descripción
`nuiHovercardTrigger`Input	`NuiHovercard`		La hovercard que se muestra.