You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository has been archived by the owner on Mar 17, 2019. It is now read-only.
Deprecated This project is now obsolete, you should use the Expansion Panels added in Material-UI 1.0 instead.
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.