Accordion
Installation
npm i -D @smui-extra/accordion
Demos
Panel 1
The content for panel 1.
- Some
- List
- Items
Panel 2
The content for panel 2.
Panel 3
The content for panel 3.
- Some
- More
- List
- Items
- To
- Show
- Big
- Height
Panel 4
If you like this component, you can thank nick who pushed me to make it. He was right, accordions are awesome! :D
Multiple
Allow multiple open panels.
Panel 1
The content for panel 1.
- Some
- List
- Items
Panel 2
The content for panel 2.
Panel 3
The content for panel 3.
- Some
- More
- List
- Items
- To
- Show
- Big
- Height
Panel 4
The content for panel 4.
Disabled and Non-Interactive Panels
Normal Panel
The content for normal panel.
Disabled Panel
The content for disabled panel.
Non-Interactive Panel
The content for non-interactive panel.
Non-Interactive Open Panel
The content for non-interactive open panel.
Descriptions
Panel 1
Description of panel 1.
The content for panel 1.
Panel 2
Description of panel 2.
The content for panel 2.
Panel 3
Description of panel 3.
The content for panel 3.
Panel 4
Description of panel 4.
The content for panel 4.
Toggle icons
Panel 1
The content for panel 1.
Panel 2
The content for panel 2.
Panel 3
Description of panel 3.
The content for panel 3.
Panel 4
Description of panel 4.
The content for panel 4.
Extending panels
Panel 1
Description of panel 1.
The content for panel 1.
- Some
- List
- Items
Panel 2
Description of panel 2.
The content for panel 2.
Panel 3
Description of panel 3.
The content for panel 3.
- Some
- More
- List
- Items
- To
- Show
- Big
- Height
Panel 4
Description of panel 4.
The content for panel 4.
Primary color
Panel 1
Description of panel 1.
The content for panel 1.
Panel 2
Description of panel 2.
The content for panel 2.
Panel 3
Description of panel 3.
The content for panel 3.
Panel 4
Description of panel 4.
The content for panel 4.
Secondary color
Panel 1
Description of panel 1.
The content for panel 1.
Panel 2
Description of panel 2.
The content for panel 2.
Panel 3
Description of panel 3.
The content for panel 3.
Panel 4
Description of panel 4.
The content for panel 4.
Nested
Panel 1
Panel 1.1
The content for panel 1.1.
Panel 1.2
The content for panel 1.2.
Panel 2
Panel 2.1
The content for panel 2.1.
Panel 2.2
The content for panel 2.2.
Paper props
The panels are Paper components, so they can take any property that Paper can.
Panel 1
Description of panel 1.
The content for panel 1.
Panel 2
Description of panel 2.
The content for panel 2.
Panel 3
Description of panel 3.
The content for panel 3.
Panel 4
Description of panel 4.
The content for panel 4.
Complex content
Panel with Simple Content
This panel has boring content.
Panel with Extravagent Content
This panel has really cool content!
A Dialog!
This dialog is even a child of the panel!
Panel with Simple Content
This panel has boring content.