Namespace: cq-abstract-marker

WebComponents. cq-abstract-marker

The abstract marker web component <cq-abstract-marker>.

An encapsulation of a complex marker which can contain HTML, video, images, CSS, and animations.

The component can be extended with additional markup types specified as values of the cq-type attribute.

Since:
  • 7.5.0

Example

Abstract markers can be anything you want them to be — even a helicopter!

<div class="stx-marker-templates" style="left: -1000px; visibility:hidden;">
	<div class="abstract">
		<div class="stx-marker abstract">
			<div class="stx-marker-content">
				<div class="sample">
					<div stage>
						<div helicopter>
							<div propeller style="height: 160px;">
								<div
									spinner
									style="-webkit-transform-origin: 40px 0 0; transform-origin: 40px 0 0;"
								>
									<div
										style="-webkit-transform: rotateY(0deg) translateX(40px);
                                                transform: rotateY(0deg) translateX(40px);"
									></div>
									<div
										style="-webkit-transform: rotateY(-90deg) translateX(40px);
                                                transform: rotateY(-90deg) translateX(40px);"
									></div>
									<div
										style="-webkit-transform: rotateY(-180deg) translateX(40px);
                                                transform: rotateY(-180deg) translateX(40px);"
									></div>
									<div
										style="-webkit-transform: rotateY(-270deg) translateX(40px);
                                                transform: rotateY(-270deg) translateX(40px);"
									></div>
								</div>
							</div>
							<div heli-body></div>
						</div>
					</div>
					<div class="text">
						This is an example of a complex marker which can contain HTML, video, images, CSS, and
						animations.
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Methods


init()

Initializes the component.

Since:
  • 7.5.0