Card Actions

Card action buttons displayed at the bottom of most the cards.

import { CardActions } from 'material-bread';

CardActions are split into leftActionItems and rightActionItems . Left action items display as full text Button s, right action items display as IconButton s. Both can be passed either as objects or nodes.

Fact: dogs make everything better

LEARN MORE





Live Editing

<View style={{flexDirection: 'row', alignItems: 'center'}}>
  <Card style={{maxWidth: 400, width: '100%'}}>
    <CardMedia
        image={
            <Image
            style={{ flex: 1, width: '100%' }}
            source={{uri: 'https://images.pexels.com/photos/1938123/pexels-photo-1938123.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'}}
            resizeMode="cover"
            />
        }
    />
    <CardContent >
      <Text style={{ color: 'rgba(0,0,0,.6)', fontSize: 14 }}>
        Fact: dogs make everything better
      </Text>
    </CardContent>
    <CardActions
      leftActionItems={[
        {name: 'share',},
        {name: 'learn more'}
      ]}
      rightActionItems={[
        {name: 'favorite',},
        {name: 'share'} 
      ]}
    />
  </Card>
</View>

import React, { Component } from 'react';
import { Card,CardContent, CardActions, } from 'material-bread';

export default class FullCard extends Component {
  render() {
    return (
      <Card>
        <CardContent >
          <Text style={{ color: 'rgba(0,0,0,.6)', fontSize: 14 }}>
            This is some test card content, though it can anything.
          </Text>
        </CardContent>
        <CardActions
          leftActionItems={[
            {name: 'share',},
            {name: 'learn more'}
          ]}
          rightActionItems={[
            {name: 'favorite',},
            {name: 'share'} 
          ]}
        />
      </Card>
    );
  }
}

Name

Description

Type

Default

leftActionItems

Can be array of objects or nodes, shows on the left as buttons

array

rightActionItems

Can be array of objects or nodes, shows on the right as IconButtons

array

style

Styles root element

object

You can see even more examples in the Storybook environment.

You can pass arbitrary nodes to the array for each section to create something custom.



BUY

Live Editing

<View style={{flexDirection: 'row', alignItems: 'center'}}>
<Card style={{maxWidth: 400, width: '100%'}}>
  <CardMedia
      image={
          <Image
          style={{ flex: 1, width: '100%' }}
          source={{uri: 'https://images.pexels.com/photos/280250/pexels-photo-280250.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'}}
          resizeMode="cover"
          />
      }
  />
  <CardActions
    leftActionItems={[
      <IconButton name="bookmark-border" size={30} color={'#673AB7'} />
    ]}
    rightActionItems={[
      <Button text={'Read more'} type="outlined" textColor={'#009688'} style={{marginRight: 8}} dense/>,
      <Button text={'Buy'} type="flat"  dense/>
    ]}
  />
</Card>
</View>

Card Actions

Component #

Usage #

Props #

Demos #

Custom #