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 | '' |