Class: CardComponent

CardComponent(optionsopt)

CardComponent displays a piece of content like an image or video along with its title and caption. This is often used in a CollectionComponent or a MediaGridComponent to display a collection of cards. ImageCardComponent is an example of extending `CardComponent` for a specific media type. The three child `Component`s are available via getters for `mainComponent`, `titleComponent`, and `captionComponent`.

Constructor

new CardComponent(optionsopt)

Parameters:
Name Type Attributes Description
options Object <optional>
Properties
Name Type Attributes Default Description
title string <optional>
 null
titleField string <optional>
 title
captionField string <optional>
 caption
Source:
Example
const model = new DataModel({
	name: 'Pimsler Particle',
	description: 'This can decrease the distance between molecules.',
	image: '/static/image.jpeg'
})
const cardComponent = new CardComponent(
	model,
	{ titleField: 'name', captionField: 'description' }
)
// Add an image as an example (though we'd really use ImageCardComponent for this)
cardComponent.mainComponent.append(
	new ImageComponent(
		model,
		{ dataField: 'image' }
	)
)

Members

_mainComponent

the main content, like an image or video
Source:

captionComponent :Component

The Component in which we display the caption of the card
Type:
Source:

mainComponent :Component

The Component in which we display the main content, like an image or video
Type:
Source:

titleComponent :Component

The Component in which we display the title of the card
Type:
Source: