Material-ui-settings-panel NPM

Material Settings Panel

A settings component in material ui style inspired by google admin console and google inbox. See the storybook for an interactive demo.

Demo

Installation

npm i --save material-ui-settings-panel
npm i --save react-onclickoutside

Usage

import { 
  ExpandablePanel, 
  HeaderPanel, 
  SettingsGroup, 
  SettingsItem, 
  SettingsPanel
} from 'material-ui-settings-panel'

// ...

render() {
  return (
    <div>
        <SettingsPanel>
          <HeaderPanel
            title="Gmail"
            subtitle="Für alle aktiviert"
            description="https://mail.google.com/a/company.com"
            image={<img src="https://ssl.gstatic.com/apps/cpanel/resources/img/gmail-128.png" />}
          />
          <ExpandablePanel
            title="Nutzer Einstellungen"
            description="Sed diam nonumy eirmod tempor invidunt ut labore"
          >
            <SettingsGroup title="Lorem ipsum">
              <SettingsItem title="Lorem ipsum" description="Description">
                <div>
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
                  sed diam nonumy eirmod tempor invidunt ut labore
                  et dolore magna aliquyam erat, sed diam voluptua.
                </div>
              </SettingsItem>
              <SettingsItem title="Lorem ipsum">
                <div>
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
                  sed diam nonumy eirmod tempor invidunt ut labore
                  et dolore magna aliquyam erat, sed diam voluptua.
                </div>
              </SettingsItem>
            </SettingsGroup>
          </ExpandablePanel>
          <ExpandablePanel
            title="E-Mail-Adressen"
            description="Lassen Sie sich alle E-Mail-Adressen und Aliase für Ihre Organisation anzeigen."
          >
          </ExpandablePanel>
        </SettingsPanel>
    </div>
  )
}

SettingsPanel Properties

Name	Type	Default	Description
style	`object`		Override the inline-styles of the root component.

HeaderPanel Properties

Name	Type	Description
description	`string`	Description for the header.
image	`node`	Image for the header.
imageStyle	`object`	Override the inline-styles of the image container.
style	`object`	Override the inline-styles of the root component.
subtitle	`string`	Subtitle for the header.
textStyle	`object`	Override the inline-styles of the text container.
title*	`string`	Title for the header.

ExpandablePanel Properties

Name	Type	Description
description	`string`	Description for the panel.
style	`object`	Override the inline-styles of the root component.
textStyle	`object`	Override the inline-styles of the text container.
title*	`string`	Title for the panel.

SettingsGroup Properties

Name	Type	Default	Description
style	`object`		Override the inline-styles of the root component.
title*	`string`		Title for the group.

SettingsItem Properties

Name	Type	Description
description	`string`	Description for the panel.
style	`object`	Override the inline-styles of the root component.
title*	`string`	Title for the panel.

* required property

License

The files included in this repository are licensed under the MIT license.

react material rating react-component

prop-types

@everything-registry/sub-chunk-2138 @zalastax/nolb-material-

0.2.0

7 years ago

0.1.1

7 years ago

0.1.0

7 years ago