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 Closed Panel
The content for non-interactive closed 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.
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.