A settings component in material ui style inspired by google admin console and google inbox.
JavaScriptMIT
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.
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><HeaderPaneltitle="Gmail"subtitle="Für alle aktiviert"description="https://mail.google.com/a/company.com"image={<imgsrc="https://ssl.gstatic.com/apps/cpanel/resources/img/gmail-128.png"/>}/><ExpandablePaneltitle="Nutzer Einstellungen"description="Sed diam nonumy eirmod tempor invidunt ut labore"><SettingsGrouptitle="Lorem ipsum"><SettingsItemtitle="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><SettingsItemtitle="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><ExpandablePaneltitle="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
Default
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
Default
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
Default
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.