admintool-material-card

Admin tool material design card as a package

Installation

npm i @elhakim/material-card

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import Card from '@elhakim/material-card'

ReactDOM.render(<Card
    renderHeader={() => <b>Hello</b>}
    renderContent={() => <span>Hello content</span>}
    renderFooter={() => <button>Submit me</button>}
    renderWrapper={content => <MyCustomWrapper>{content}</MyCustomWrapper>}
    headerTheme="layers"
    theme="layers"
    footerOutside={false}
    thinHeader={false}
    thinFooter={false}
    thinContent={false}
    elevation={10}
    width="100%"
    style={{
        border: '1px solid blue',
        boxSizing: 'border-box',
        borderRadius: 5
    }}
/>, document.getElementById('root'))

Options

| option | example | description| |---|---|---| | renderHeader | renderHeader={() => <b>Hello</b>} | A function that its return will be content for the header | | renderContent | renderContent={() => <span>Hello content</span>} | A function that its return will be content for the card body | | renderFooter | renderFooter={() => <button>Submit me</button>} | A function that return the footer content | | renderWrapper | renderWrapper={content => <MyCustomWrapper>{content}</MyCustomWrapper>} | A function that takes the full evaluated content and return new content | | headerTheme | 'canvas' or 'layers' | every value have a different styling on the header | | theme | 'canvas' or 'layers' | every value have a different styling on the content | | thinHeader | thinHeader={false} | either add or remove header default padding | | thinFooter | thinFooter={false} | either add or remove footer default padding | | thinContent | thinFooter={false} | either add or remove content default padding | | footerOutside | footerOutside={false} | controle footer position either inside the card or floated outside of it | | elevation | elevation={10} | Card elevation, it accepts ints from 0 to 10 | | width | width="100%" | css property width | | style | style={{margin: 25}} | style object to apply to the parent of the card |