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 |