Detail Tile Item

DetailTileItem

This element is used to present a snippet of text and an image. An action button is also displayed for the user to interact with if they wanted to find out more about that tile.

Props

The props needed for this component are listed and explained below:

• image - This prop must be a string

• icon - This prop must be a string

• title - This prop must be a string

• description - This prop must be a string

• hasBeenBookmarked - This prop must be a boolean

• hasBeenLiked - This prop must be a boolean

• onBookmarkClicked - This prop must be a function

• onLikeClicked - This prop must be a function

• onClick - This prop must be a function

• actionButtonText - This prop must be a string

• onActionButtonClicked - This prop must be a function

• actionButtonIcon - This prop must be a string

Example

<DetailTileItem
	image="http://placehold.it/350x200"
	icon="play"
	title="Detailed Tile Item"
	description="Playllist description Sed justo libero, fringilla non nisl nec, dignissim vestibulum tellus. Sed sed feugiat quam."
	hasBeenBookmarked={this.state.hasBeenBookmarked}
	hasBeenLiked={this.state.hasBeenLiked}
	onBookmarkClicked={this.onBookmarkClicked}
	onLikeClicked={this.onLikeClicked}
	onClick={this.onClick}
	actionButtonText="Continue"
	onActionButtonClicked={this.onActionButtonClicked}
	actionButtonIcon="pencil"
/>

// ...React Component
getInitialState: function() {
	return {
		hasBeenBookmarked: false,
		hasBeenLiked: false
	};
},

onClick: function() {
	console.log("Item has been clicked");
},

onBookmarkClicked: function(isBookmarked) {
	console.log("is this item bookmarked", isBookmarked)

	this.setState({
		hasBeenBookmarked: isBookmarked
	});
},

onLikeClicked: function(isLiked) {
	console.log("is this item liked", isLiked)

	this.setState({
		hasBeenLiked: isLiked
	});
},

onActionButtonClicked: function() {
	console.log("Action button clicked");
},

Related

• Tile