Поповер — небольшой немодальный диалог без затемнения, который открывается рядом с триггерным элементом. Он может содержать текст, поля ввода, любые другие элементы управления.
По умолчанию поповер открывается с предустановленной шириной Medium, но существует еще два размера и возможность использовать произвольную величину.
Поповеры с компактным содержимым открываются с уменьшенными внутренними полями. У поповеров такого размера нет шапки и футера:
Высота поповера зависит от содержимого. Рекомендуемая максимальная высота — 480px (может быть увеличена по усмотрению дизайнера).
Чтобы гибко управлять отступами поповера в зависимости от его контента, сбросьте стандартные значения с помощью параметра [kbqPopoverDefaultPaddings]="false". После этого задавайте внутренние отступы (padding) напрямую в шаблоне контентной части:
Стандартный отступ заодно не дает панели, которая скрывает переполнение, обрезать обводку фокуса у первого поля в контентной области. Сбросив его, заложите это место в свои отступы.
Стрелка, исходящая из поповера, может быть скрыта, что позволяет приблизить сам поповер к триггерному элементу.
Поповер имеет дополнительный параметр kbqPopoverOffset, который отвечает за смещение поповера относительно триггерного объекта.
Учитывайте контекст, в котором появляется поповер. Настройте выравнивание так, чтобы поповер не заслонял элементы, которые могут понадобиться.
Указатель расположен по центру поповера и целится в середину триггерного элемента.
Поповер выравнивается по границе триггерного элемента, указатель расположен на фиксированном расстоянии от края поповера. Если триггерный элемент слишком маленький, то указатель выравнивается по его центру.
По умолчанию при скролле поповер не закрывается и прокручивается вместе со страницей, оставаясь в том месте, откуда был открыт.
Поповер может закрываться при скролле страницы; какое поведение выбрать — решает проектировщик.
За это отвечает параметр kbqPopoverCloseOnScroll с тремя состояниями. Если его не задавать, поповер переживает скролл, но все же закрывается, когда уезжает за пределы контейнера с классом kbq-hide-nested-popup. Со значением true он закрывается при любом скролле, со значением false — не закрывается никогда, даже в таком контейнере.
По умолчанию поповер показывается поверх горизонтальных Navbar и Topbar. Чтобы при прокрутке он уходил под них, как в примере ниже, пометьте область содержимого директивой kbqOverlayLayer — см. Панели под липкой шапкой. Поповер с kbqPopoverStickToWindow остается над шапками.
Поповер можно использовать без шапки и футера — это необязательные элементы.
Размер вертикальных внутренних полей контентной области зависит от наличия шапки и подвала. Без шапки верхнее поле увеличивается. Без футера увеличивается нижнее поле.
Заголовок можно перенести в контентную область, а не располагать в отдельной панели хедера. Этот прием хорошо подходит, когда в поповере нет прокрутки.
Кнопку «Закрыть» можно расположить в хедере или в правом верхнем углу, когда панели хедера нет. Это способ избавиться от футера с единственной кнопкой «Закрыть».
[kbqPopoverConfirm] — готовый вариант поповера, который спрашивает у пользователя подтверждение действия. У него нет ни шапки, ни футера: в панели только вопрос и одна подтверждающая кнопка. По нажатию кнопки поповер отправляет событие confirm и закрывается сам.
<button kbq-button kbqPopoverConfirm (confirm)="deleteReport()">Удалить</button>Обе строки необязательные и задаются параметрами на самом триггере:
<button kbq-button kbqPopoverConfirm kbqPopoverConfirmText="Удалить отчет?" kbqPopoverConfirmButtonText="Удалить" (confirm)="deleteReport()" > Удалить </button>
Если их не задавать, вопрос и подпись кнопки берутся из секции popoverConfirm активной локали, так что приложению со сменной локалью не нужно ничего настраивать. Чтобы переопределить формулировки для всего приложения или его части, объявите провайдеры KBQ_POPOVER_CONFIRM_TEXT и KBQ_POPOVER_CONFIRM_BUTTON_TEXT: параметр важнее провайдера, а провайдер важнее локали.
Поповер можно открыть рядом с выделенным текстом. Он остается рядом с выделением при прокрутке страницы, а выделение сохраняется при нажатии на кнопку.
kbqPopoverOrigin принимает элемент или прямоугольник в координатах окна. kbqCreateCaretOrigin создает динамическую привязку к выделению, а kbqGetSelectionRect вычисляет положение выделения внутри элемента. Метод updatePosition(true) перемещает уже открытый поповер к изменившемуся выделению. Значение null возвращает поповер к триггеру.
Атрибут [kbqPopoverAutoFocus]="false" сохраняет фокус и выделение на исходном месте. Отмените действие mousedown по умолчанию внутри поповера, чтобы первый клик не снял выделение. Escape обрабатывайте на уровне документа: фокус остается в тексте, поэтому ни триггер, ни панель эту клавишу не получают. Открывать поповер нужно после завершения выделения: для мыши — после pointerup, для клавиатуры — после небольшой паузы. Иначе он привяжется к первым символам выделения, которое еще растет.
Поповер находится в оверлее в конце документа, поэтому Tab проходит мимо него. При необходимости обработчик Tab должен перевести фокус на первый элемент поповера.
По умолчанию поповер открывается по клику и по клавишам Enter и Space, а закрывается по клику снаружи, по Esc или кнопкой закрытия. Другие триггеры выбираются параметром kbqTrigger: hover, focus, manual или их сочетание через запятую.
Параметры kbqEnterDelay и kbqLeaveDelay задают задержки перед открытием и закрытием в миллисекундах. Оба по умолчанию равны 0, кроме одного случая: поповер с триггером hover закрывается через 500 мс, если kbqLeaveDelay не задан явно, — так панель остается достижимой, пока курсор до нее идет. Чтобы отказаться от задержки, задайте kbqLeaveDelay="0".
Параметры kbqTrigger, kbqEnterDelay и kbqLeaveDelay общие с директивой тултипа, поэтому на элементе с обеими директивами они перенастраивают и ту, и другую.
Панель объявлена диалогом, и ее имя берется из шапки. Поповеру без шапки брать имя неоткуда, поэтому задайте его параметром kbqPopoverAriaLabel: пока имени нет, панель диалогом не объявляется — безымянный диалог ничего не сообщает пользователю.
Открытие по клику, с клавиатуры или программно переводит фокус внутрь панели и удерживает его там, пока поповер открыт; любой путь закрытия возвращает фокус на триггер. Поповер, открытый по наведению или по фокусу, фокус не забирает, потому что закрывается уходом курсора.
Когда нужно показать во всплывающем окне короткий текст без интерактивных элементов, то используйте тултип.
Дропдаун подойдет, если нужно показать список команд. У дропдауна нет навигации внутри выпадающего меню клавишей Tab. Поповер же работает как модальное окно: при открытии он перехватывает фокус и ведет по содержимому окна.