@materialr/card

Material card implementation for React

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
00Jun 8, 2018Nov 19, 2017Minified + gzip package size for @materialr/card in KB

Readme

MaterialR Card

Build Status Coverage Status NSP Status semantic-release

Material card implementation for React

Installation

$ npm install --save @materialr/card

Demo

A full demo is available on the MaterialR website showcasing all variants.

Components

Named exports

import { ActionButton } from '@materialr/card';

Props

Prop Type Required Default Description
children node Yes N/A The child elements to render inside the action button
className string No undefined Additional classNames to add
disabled bool No false Whether the action button is disabled
onClick func No undefined The click handler method
ripple bool No false Whether the action button has a ripple enabled
import { ActionButtons } from '@materialr/card';

Props

Prop Type Required Default Description
children node Yes N/A The child elements to render inside the action buttons
className string No undefined Additional classNames to add
import { ActionIcon } from '@materialr/card';

Props

Prop Type Required Default Description
className string No undefined Additional classNames to add
icon string Yes N/A The material icon to render
title string No undefined The title attribute for the icon
import { ActionIcons } from '@materialr/card';

Props

Prop Type Required Default Description
children node Yes N/A The child elements to render inside the action icons
className string No undefined Additional classNames to add
import { ActionIconToggle } from '@materialr/icon-toggle';

Props

Prop Type Required Default Description
className string No undefined Additional classNames to add
disabled bool No false Whether the icon-toggle is disabled
iconOff string Yes N/A The material icon to render for the off state
iconOn string Yes N/A The material icon to render for the on state
labelOff string Yes N/A The title to add to the icon-toggle in the off state
labelOn string Yes N/A The title to add to the icon-toggle in the on state
onChange func Yes N/A The change handler method
import { Actions } from '@materialr/card';

Props

Prop Type Required Default Description
children node Yes N/A The child elements to render inside the action icons
className string No undefined Additional classNames to add
fullBleed bool No false Whether to render a full width action
import { Card } from '@materialr/card';

Props

Prop Type Required Default Description
children node Yes N/A The child elements to render inside the action icons
className string No undefined Additional classNames to add
outlined bool No false Whether to render an outlined card
import { MediaContent } from '@materialr/card';

Props

Prop Type Required Default Description
children node Yes N/A The child elements to render inside the media content
className string No undefined Additional classNames to add
import { Media, MEDIA_ASPECT_RATIO_1_1, MEDIA_ASPECT_RATIO_16_9 } from '@materialr/card';

Props

Prop Type Required Default Description
aspectRatio enum (MEDIA_ASPECT_RATIO_1_1/MEDIA_ASPECT_RATIO_16_9) No MEDIA_ASPECT_RATIO_16_9 The aspect ratio of the media
children node Yes N/A The child elements to render
className string No undefined Additional classNames to add

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.