ptcs-media gallery

Visual

Overview

The Media Gallery displays media content, designed for optimal viewing. This media-gallery supports seamless image display with intuitive carousel navigation, allowing users to browse images effortlessly. The media-gallery also support the full-screen mode option.

Usage Examples

Basic Usage

<ptcs-media-gallery></ptcs-media-gallery>

Component API

Properties

Property	Type	Description	Default
label	String	Specifies the text of the Media Gallery label.
labelType	String	The label text type of the Media Gallery label. Options: caption, body, label, title, large-title, sub-header, header, large-header.	label
labelAlignment	String	Controls the alignment of the Media Gallery label. Options: left, center, right.	left
labelInFullScreenView	Boolean	Disables the Media Gallery.	false
data	Array	An array that contains items of media URL, title and description.
isLooping	Boolean	Enables looping for the media items in the gallery.	false
showThumbnails	Boolean	Shows thumbnails for media items when in the carousel view.	false
fullScreenViewThumbnails	Boolean	Shows thumbnails for media items in full screen mode.	false
disabled	Boolean	Disables the Media Gallery	false
enterFullTooltip	String	Tooltip for media items button to open in full screen mode.	Enter Full Mode
exitFullTooltip	String	Tooltip for media items button to exit from full screen mode.	Exit Full Mode
mediaCountLabel	String	Count of media items label in the gallery	{index} of {count}
mediaIndexLabel	String	Index of media item in the gallery label	Media Item {index}
noMediaLabel	String	No Media label in the gallery label	No Media

Styling

Parts

Part	Description
label	The Timer label.
tool-bar	The upper toolbar container.
paging	The toolbar-paging section.
display-control	The toolbar-display-control container.
madia-viewport	The main media viewport container.
select-left	The selection left media icon.
select-right	The selection right media icon.
thumbnails	The thumbnails container.
thumbnail	A single thumbnail container.