API компонента Popover

Импорт

import-popover.ts

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

NuiPopover

Нативный popover рядом с элементом, который его открыл.

Селектор: [nuiPopover]
Экспортируется как: nuiPopover

NuiPopover: Свойства
Имя	Тип	По умолчанию	Описание
`side`Input	`'top' \| 'bottom' \| 'start' \| 'end'`	`'bottom'`	Сторона триггера, с которой открывается панель. Если места нет, она переходит на другую.
`align`Input	`'start' \| 'center' \| 'end'`	`'start'`	Выравнивание относительно триггера вдоль этой стороны.
`offset`Input	`number`	`8`	Зазор между триггером и панелью в пикселях.
`arrow`Input	`boolean`	`false`	Показывает стрелку, указывающую на триггер.
`enter`Input	`NuiEnter`		Как компонент появляется: `zoom`, `fade`, `drop`, `rise`, `unfold`, `flip`, `swing`, `slide` или `none`.
`motion`Input	`NuiMotion`		Пружина, задающая движение компонента: `snappy`, `bouncy`, `jelly`, `elastic`, `lazy`, `mechanical` или `none`.
`spring`Input	`NuiSpring`		Произвольная пружина в виде `{ stiffness, damping, mass }`, которая компилируется в CSS во время выполнения. Переопределяет `motion`.
`corners`Input	`NuiCorners`		Форма углов: `round`, `squircle`, `bevel`, `scoop`, `notch` или `square`.
`radius`Input	`NuiRadius`		Радиус скругления углов: `none`, `small`, `medium`, `large` или `full`.
`density`Input	`NuiDensity`		Сколько места занимает компонент: `compact`, `regular` или `roomy`.
`openChange`Output	`boolean`		Срабатывает при открытии и закрытии.
`show`Метод	`(anchor: HTMLElement) => void`		Открывает панель рядом с любым элементом.
`hide`Метод	`() => void`		Закрывает панель.

Если входное свойство настройки не задано, компонент берёт его значение из ближайшего атрибута data-nui-*. Подробнее — в руководстве по настройке.

NuiPopoverTrigger

Кнопка, которая открывает и закрывает popover через нативный popovertarget.

Селектор: button[nuiPopoverTrigger]

NuiPopoverTrigger: Свойства
Имя	Тип	По умолчанию	Описание
`nuiPopoverTrigger`Input	`NuiPopover`		Popover, который нужно открыть.

NuiHovercard

Расширенная всплывающая подсказка, описывающая свой триггер.

Селектор: [nuiHovercard]
Экспортируется как: nuiHovercard

NuiHovercard: Свойства
Имя	Тип	По умолчанию	Описание
`side`Input	`'top' \| 'bottom' \| 'start' \| 'end'`	`'bottom'`	Сторона триггера, с которой открывается карточка. Если места нет, она переходит на другую.
`align`Input	`'start' \| 'center' \| 'end'`	`'start'`	Выравнивание относительно триггера вдоль этой стороны.
`offset`Input	`number`	`8`	Зазор между триггером и карточкой в пикселях.
`arrow`Input	`boolean`	`false`	Показывает стрелку, указывающую на триггер.
`openDelay`Input	`number`	`500`	Через сколько миллисекунд наведения карточка открывается. При фокусе с клавиатуры — сразу.
`closeDelay`Input	`number`	`300`	Через сколько миллисекунд после ухода указателя карточка закрывается.
`enter`Input	`NuiEnter`		Как компонент появляется: `zoom`, `fade`, `drop`, `rise`, `unfold`, `flip`, `swing`, `slide` или `none`.
`motion`Input	`NuiMotion`		Пружина, задающая движение компонента: `snappy`, `bouncy`, `jelly`, `elastic`, `lazy`, `mechanical` или `none`.
`spring`Input	`NuiSpring`		Произвольная пружина в виде `{ stiffness, damping, mass }`, которая компилируется в CSS во время выполнения. Переопределяет `motion`.
`corners`Input	`NuiCorners`		Форма углов: `round`, `squircle`, `bevel`, `scoop`, `notch` или `square`.
`radius`Input	`NuiRadius`		Радиус скругления углов: `none`, `small`, `medium`, `large` или `full`.
`density`Input	`NuiDensity`		Сколько места занимает компонент: `compact`, `regular` или `roomy`.
`openChange`Output	`boolean`		Срабатывает при открытии и закрытии.
`show`Метод	`(anchor: HTMLElement) => void`		Открывает карточку рядом с любым элементом.
`hide`Метод	`() => void`		Закрывает карточку.

NuiHovercardTrigger

Показывает hovercard при наведении и фокусе с клавиатуры и делает её описанием этого элемента.

Селектор: [nuiHovercardTrigger]

NuiHovercardTrigger: Свойства
Имя	Тип	По умолчанию	Описание
`nuiHovercardTrigger`Input	`NuiHovercard`		Hovercard, которую нужно показать.