1.0.2 • Published 4 years ago
collapsable-panel v1.0.2
collapsable-panel
Material-ui Collapsable with clickable header.
Install
npm install collapsable-panel
yarn add collapsable-panel
Usage
Here's an example of basic usage:
import React, { useState } from 'react'
import PaperLabeled from 'collapsable-panel'
function MyApp() {
return (
<ContentPanel title="General Elec." iconComponent={PowerIcon} hideable>
<Chart
chartType="AreaChart"
data={metricsChart}
options={{
vAxis: { minValue: 0 },
hAxis: {
format: 'HH:mm:ss',
maxTextLines: 10,
},
}}
/>
</ContentPanel>
);
}
User guide
PaperLabeled
Displays a material-ui Collapsable with a title and a icon
props
Prop name | Type | Description | Default value |
---|---|---|---|
title | string o ReactElement | Title that will be shown in the top | '' |
iconComponent | React.JSXElementConstructor | Icon in the top left | |
children | ReactElement | Conmtent of the info | |
hideable | boolean | Sets the pannel as hideable | false |
hiddenInit | boolean | The panel is constructed hidden or not | false |
classes | Obj of clases | Classes in the inner components | undefined |
CSS props
Prop name | Type | Description | Default value |
---|---|---|---|
root | string | Class of the main continer | '' |
title | string | Class of the title | '' |
contentContainer | string | Class of the container of the children | '' |