On This Page
An accordion layout layouts panel titles vertically, only one of the panel contents is visible at a time.
- Fluent
- Declarative
AccordionLayout
.builder()
.panels(List.of(
new AccordionPanel("Panel 1", new Text("Panel 1")),
new AccordionPanel("Panel 2", new Text("Panel 2")),
new AccordionPanel("Panel 3", new Text("Panel 3"))
))
.build()
@AccordionLayout
List panels = List.of(
new Text("Panel 1"),
new Text("Panel 2"),
new Text("Panel 3")
);
or
@AccordionLayout
class Container {
Object panel1 = new Text("Panel 1");
@AcoordionPanel(active=true)
Object panel2 = new Text("Panel 2");
Object panel3 = new Text("Panel 3");
}
Available properties
This is the list of available properties for a accordion layout:
| Property | Description | Notes |
|---|---|---|
| id | id for this component | |
| cssClasses | list of css classes | content of the css attribute |
| style | inline style attributes | content of the style attribute |
| fullWidth | shortcut to set width:100% | true/false |
| variant | one of filled, small, reverse |
And this is the list of available properties for a accordion panel:
| Property | Description | Notes |
|---|---|---|
| active | true/false | only 1 panel is active at a time |
| disabled | true/false |
You can see a full explanation of those properties at https://vaadin.com/docs/latest/components/accordion