Image
PrimeNG/Image (opens in a new tab)
Используется для отображения изображения в виде превью и в развернутом виде. Можно приближать, уменьшать и переворачивать изображение.
С чего начать
Подключите модуль
import {ImageModule} from 'primeng-lts/image';Встройте компонент с помощью тэгаp-imageи передайте нужныsrc.p-imageподдерживает все аттрибуты, что и нативный тэг img.
Basic
Базовый сценарий не предпологает предпросмотра, а просто выводит изображение с заданными параметрами
Preview
Включается флагом[preview]="true". Подключает функционал просмотра изображения в увеличенном формате на весь экран и включает функционал зума и поворота. Этот режим позволяет так же настраивать анимации для поворота и зума.
Шаблоны индикаторов
По умолчанию индикатором выступает глаз, который появялется по ховеру. Если Вам нужно вывести другой контент воспользуйтесь теплейтомindicator
Indicator content
Свойства
| Name | Type | Default | Description |
|---|---|---|---|
| preview | boolean | false | Controls the preview functionality. |
| style | any | null | Inline style of the element. |
| styleClass | string | null | Style class of the element. |
| imageStyle | any | null | Inline style of the image element. |
| imageClass | string | null | Style class of the image element. |
| src | string | null | src attribute of the image element. |
| alt | string | null | alt attribute of the image element. |
| width | string | null | width attribute of the image element. |
| height | string | null | height attribute of the image element. |
События
| Name | Parameters | Description |
|---|---|---|
| onShow | - | Triggered when the preview overlay is shown. |
| onHide | - | Triggered when the preview overlay is hidden. |
Шаблоны
| Name | Parameters |
|---|---|
| indicator | - |
Стилизация
| Name | Element |
|---|---|
| p-image | Container element. |
| p-image-preview-container | Container element with preview enabled. |
| p-image-preview-indicator | Mask layer over the image when hovered. |
| p-image-preview-icon | Icon of the preview indicator. |
| p-image-mask | Preview overlay container. |
| p-image-toolbar | Transformation options container. |
| p-image-action | An element inside the toolbar. |
| p-image-preview | Image element inside the preview overlay. |