Card Media
CardMedia displays an image on a card.
import { CardMedia } from 'material-bread';Component #
CardMedia takes an
image prop and fits it into a Card . Optional title and subtitle are shown in the bottom left corner of the image .Top ten books
by Cody
Books ranked with arbitrary bias, inconsistent logic, and strong opinions.
READ
Live Editing
<View style={{flexDirection: 'row', alignItems: 'center'}}> <Card style={{maxWidth: 400, width: '100%'}}> <CardMedia title={'Top ten books'} subtitle={'by Cody'} image={ <Image style={{ flex: 1, width: '100%' }} source={{uri: 'https://images.pexels.com/photos/34620/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'}} resizeMode="cover" /> } /> <CardContent > <Text style={{ color: 'rgba(0,0,0,.6)', fontSize: 14 }}> Books ranked with arbitrary bias, inconsistent logic, and strong opinions. </Text> </CardContent> <CardActions leftActionItems={[ {name: 'Read',}, ]} rightActionItems={[ {name: 'favorite',}, {name: 'share'} ]} /> </Card> </View>
Usage #
import React, { Component } from 'react';
import { Card, CardContent, CardMedia } from 'material-bread';
export default class FullCard extends Component {
render() {
return (
<Card>
<CardMedia
title={'Top ten books'}
subtitle={'by Cody'}
image={
<Image
style={{ flex: 1, width: '100%' }}
source={{uri: 'https://images.pexels.com/photos/34620/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'}}
resizeMode="cover"
/>
}
/>
<CardContent >
<Text style={{ color: 'rgba(0,0,0,.6)', fontSize: 14 }}>
This is some test card content, though it can anything.
</Text>
</CardContent>
</Card>
);
}
}Props #
Name
Description
Type
Default
height
Sets height of section and thus the image
number
194
image
Displays image across the whole card media section
node
subtitle
Renders subtitle below the title
string
subtitleStyles
Styles for subtitle
object
title
Renders title
string
titleStyles
Styles for title
object
style
Styles root element
object
Demos #
You can see even more examples in the Storybook environment.