collapsable-panel
Version:
Panel with title and icon collapsable
66 lines (50 loc) • 1.92 kB
Markdown
# collapsable-panel
Material-ui Collapsable with clickable header.
### Install
```bash
npm install collapsable-panel
yarn add collapsable-panel
```
### Usage
Here's an example of basic usage:
```tsx
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<SvgIconProps> | 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 | '' |