1.1.2 • Published 4 years ago
@elhakim/material-card v1.1.2
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 |