Getting Started with KendoReact Card
The Card component represents any content and actions about a single subject.
It provides clarity, categorization and an attractive way of presenting content.
The building blocks of the Card component are the following:
Basic Usage
The following example demonstrates the Card in action.
- Example
- View Source
- Open In Stackblitz
import React from 'react';
import ReactDOM from 'react-dom';
import { Card, CardHeader, CardTitle, CardBody, CardActions, CardImage, CardSubtitle, Avatar } from '@progress/kendo-react-layout';
const cardsData =
[
{
thumbnailSrc: 'https://modelagency.one/wp-content/uploads/2018/02/london-uk-modeling-agency-list-casting-shows.jpg',
headerTitle: 'City Street style',
headerSubtitle: 'London, United Kingdom',
commentsExpanded: false,
postLiked: false,
comments: [],
newCommentTextValue: '',
postLikes: 174,
scrollViewItems: [
{ url: 'http://themysteriousgirl.ro/wp-content/uploads/2016/02/themysteriousgirl.ro-larisacostea-8484-20160219.jpg' },
{ url: 'https://theimpression.com/wp-content/uploads/2018/09/london-str-rs19-3836.jpg' },
{ url: 'http://www.rentcafe.com/dmslivecafe/UploadedImages/4a46b8ca-24ef-44f8-92e1-876759279731.jpg' }
]
},
{
thumbnailSrc: 'https://i.ytimg.com/vi/A5siea8OCpg/maxresdefault.jpg',
headerTitle: 'Bulgarian Nature',
headerSubtitle: 'Bulgaria, Europe',
commentsExpanded: false,
postLiked: false,
comments: [],
newCommentTextValue: '',
postLikes: 962,
scrollViewItems: [
{ url: 'https://photo-forum.net/imgs_medium/2018-08/1534255644_DJI_0793-HDR-1x1-FF.jpg' },
{ url: 'https://www.voubs.bg/original/photo/3ee/The+Natural+Beauty+of+Bulgaria_3afa3303e2c64e454390742d58e5d91c.jpg' },
{ url: 'https://static.blitz.bg/documents/newsimages/201405/20140502.noxvnyerjn.jpg' }
]
}
]
class App extends React.Component {
state = {
cards: cardsData
}
postLikesCount = (card) => {
let index = this.state.cards.findIndex(item => item.thumbnailSrc === card.thumbnailSrc);
let newCards = [...this.state.cards];
newCards[index].postLiked = !newCards[index].postLiked;
this.setState({ cards: newCards });
}
commentClick = (card) => {
let index = this.state.cards.findIndex(item => item.thumbnailSrc === card.thumbnailSrc);
let newCards = [...this.state.cards];
newCards[index].commentsExpanded = !newCards[index].commentsExpanded;
this.setState({ cards: newCards });
}
commentLikesCount = (comment) => {
}
postComment = (card) => {
let index = this.state.cards.findIndex(item => item.thumbnailSrc === card.thumbnailSrc);
let newCards = [...this.state.cards];
let textArea = document.querySelector('.k-textarea');
newCards[index].comments.push({
likes: 0,
text: textArea.value
})
textArea.value = ''
this.setState({ cards: newCards });
}
render() {
return (
<div style={{display: 'flex', justifyContent: 'space-evenly', flexWrap: 'wrap'}}>
{this.state.cards.map(card => {
return (
<Card style={{ width: 260, boxShadow: '0 0 4px 0 rgba(0, 0, 0, .1)', marginTop: '15px' }}>
<CardHeader className="k-hbox" style={{background: 'transparent'}}>
<Avatar type='image' shape='circle'><img src={card.thumbnailSrc} style={{ width: 40, height: 40 }} /></Avatar>
<div>
<CardTitle style={{marginBottom: '4px'}}>{card.headerTitle}</CardTitle>
<CardSubtitle><p>{card.headerSubtitle}</p></CardSubtitle>
</div>
</CardHeader>
<CardImage src={card.scrollViewItems[0].url} style={{height: '185px', maxWidth: '100%'}}/>
<CardActions style={{display: 'flex', justifyContent: 'space-between'}}>
<div>
<button className="k-button k-flat" onClick={() => this.postLikesCount(card)}>
<span className={card.postLiked ? 'k-icon k-i-heart' : 'k-icon k-i-heart-outline'} />
</button>
<button className="k-button k-flat" onClick={() => this.commentClick(card)}>
<span className="k-icon k-i-comment" />
</button>
<button className="k-button k-flat"><span className="k-icon k-i-share"></span></button>
</div>
<span style={{fontSize: '13px', alignSelf: 'center', color:'#656565'}}>{card.postLikes} likes</span>
</CardActions>
{
card.commentsExpanded &&
<CardBody>
<div>
<div style={{marginBottom: '8px', padding: '0 16px'}}>
{
card.comments.map(comment => {
return (
<div style={{display: 'flex', justifyContent: 'space-between'}}>
<div style={{padding: '4px 0', alignItems: 'center', display: 'flex'}}>
<Avatar
type='initials'
shape='circle'
style={{ color: 'white', width: 20, height: 20 }}
>
<span>SS</span>
</Avatar>
<div style={{display:'flex', flexDirection: 'column'}}>
<span style={{fontSize: '13px', fontWeight: 'bold', maxWidth: '100px', wordBreak: 'break-all'}}>{comment.text}</span>
<span className="time">1s ago<span style={{marginLeft: '8px'}}>{comment.likes} like</span></span>
</div>
</div>
<button className="k-button k-flat" onClick={() => this.commentLikesCount(comment)}>
<span className={comment && comment.likes > 0 ? 'k-icon k-i-heart' : 'k-icon k-i-heart-outline'} colo />
</button>
</div>
)
})
}
</div>
</div>
<div className="k-hbox" style={{padding: '16px 16px 0'}}>
<textarea className="k-textarea" placeholder="Comment..." style={{resize: 'none', borderRadius: 10, padding: 5, fontSize: 10}}/>
<button className="k-button k-primary k-flat" style={{ marginLeft: 10, borderRadius: 10 }} onClick={() => this.postComment(card)}>Post</button>
</div>
</CardBody>
}
</Card>
)
})}
</div>
);
}
}
ReactDOM.render(
<App />,
document.querySelector('my-app')
);