Tile Item

TileItem

Similar to the DetailTileItem, this element is used to display a title and an image to give the user an idea of what content will be shown if they were to click the action button in the middle.

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

• 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

Example

<TileItem 
	image="http://placehold.it/250x150"
	icon="play"
	title="Tile item one Tile item one Tile item ones Tile item one"
	hasBeenBookmarked={this.state.hasBeenBookmarked}
	hasBeenLiked={this.state.hasBeenLiked}
	onBookmarkClicked={this.onBookmarkedClicked}
	onLikeClicked={this.onLikedClicked}
	onClick={this.onClick}
/>

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

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

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

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

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

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

Related

• DetailTileItem