@materialr/card

MaterialR Card

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