1.0.2 • Published 4 years ago

collapsable-panel v1.0.2

Weekly downloads
3
License
ISC
Repository
github
Last release
4 years ago

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>
  );
}

alt text alt text

User guide

PaperLabeled

Displays a material-ui Collapsable with a title and a icon

props

Prop nameTypeDescriptionDefault value
titlestring o ReactElementTitle that will be shown in the top''
iconComponentReact.JSXElementConstructorIcon in the top left
childrenReactElementConmtent of the info
hideablebooleanSets the pannel as hideablefalse
hiddenInitbooleanThe panel is constructed hidden or notfalse
classesObj of clasesClasses in the inner componentsundefined

CSS props

Prop nameTypeDescriptionDefault value
rootstringClass of the main continer''
titlestringClass of the title''
contentContainerstringClass of the container of the children''