Details
- Usage
- Styling
Details is an expandable panel for showing and hiding content from the user, to make the UI less cluttered.
new tab
Span name = new Span("Sophia Williams");
Span email = new Span("sophia.williams@company.com");
Span phone = new Span("(501) 555-9128");
VerticalLayout content = new VerticalLayout(name, email, phone);
content.setSpacing(false);
content.setPadding(false);
Details details = new Details("Contact information", content);
details.setOpened(true);
add(details);Anatomy
Details consist of a summary area and a content area.
Summary
The Summary is the part that’s always visible, and typically describes the content, for example with a title. Clicking on the summary toggles the content area’s visibility.
The summary supports rich content and can contain any component. This can be used, for example, to display the status of the corresponding content.
new tab
HorizontalLayout summary = new HorizontalLayout();
summary.setSpacing(false);
Icon icon = VaadinIcon.EXCLAMATION_CIRCLE.create();
icon.getStyle().set("width", "var(--lumo-icon-size-s)");
icon.getStyle().set("height", "var(--lumo-icon-size-s)");
HorizontalLayout errorBadge = new HorizontalLayout(icon,
new Span(" 2 errors"));
errorBadge.setSpacing(false);
errorBadge.getStyle().set("color", "var(--lumo-error-text-color)");
errorBadge.getStyle().set("margin-left", "var(--lumo-space-s)");
summary.add(new Text("Contact information"), errorBadge);
FormLayout content = new FormLayout();
content.setResponsiveSteps(new FormLayout.ResponsiveStep("0", 1),
new FormLayout.ResponsiveStep("20em", 2));
TextField address = new TextField("Address");
address.setValue("4027 Amber Lake Canyon");
content.add(address, 2);
TextField zipCode = new TextField("ZIP code");
zipCode.setRequired(true);
content.add(zipCode);
TextField city = new TextField("City");
city.setRequired(true);
content.add(city);
ComboBox<Country> countries = new ComboBox<>("Country");
countries.setItems(DataService.getCountries());
countries.setItemLabelGenerator(Country::getName);
content.add(countries);
Details details = new Details(summary, content);
details.setOpened(true);
add(details);Content
This is the collapsible part of Details. It can contain any component. When the content area is collapsed, the content is invisible and inaccessible by keyboard or screen reader.
new tab
Details analyticsDetails = createDetails("Analytics",
createStyledAnchor("#", "Dashboard"),
createStyledAnchor("#", "Reports"),
createStyledAnchor("#", "Data sources"));
Details customersDetails = createDetails("Customers",
createStyledAnchor("#", "Accounts"),
createStyledAnchor("#", "Contacts"));
Details financesDetails = createDetails("Finances",
createStyledAnchor("#", "Invoices"),
createStyledAnchor("#", "Transactions"),
createStyledAnchor("#", "Statements"));
add(analyticsDetails, customersDetails, financesDetails);Theme Variants
Details has three theme variants: filled, small, and reverse. These variants can be combined with each other. For example, all three theme variants can be applied to the same Details component.
Filled
The filled theme variant makes the component’s boundaries visible, which helps tie its content together visually and distinguishes it from the surrounding UI.
new tab
UnorderedList content = new UnorderedList(new ListItem("Blake Martin"),
new ListItem("Caroline Clark"), new ListItem("Avery Torres"),
new ListItem("Khloe Scott"), new ListItem("Camila Fisher"),
new ListItem("Gavin Lewis"), new ListItem("Isabella Powell"),
new ListItem("Zoe Wilson"));
Details details = new Details("Members (8)", content);
details.setOpened(true);
details.addThemeVariants(DetailsVariant.FILLED);
add(details);Small
Use the small theme variant for compact UIs.
new tab
UnorderedList content = new UnorderedList(new ListItem("Blake Martin"),
new ListItem("Caroline Clark"), new ListItem("Avery Torres"),
new ListItem("Khloe Scott"), new ListItem("Camila Fisher"),
new ListItem("Gavin Lewis"), new ListItem("Isabella Powell"),
new ListItem("Zoe Wilson"));
Details details = new Details("Members (8)", content);
details.setOpened(true);
details.addThemeVariants(DetailsVariant.SMALL);
add(details);Reverse
The reverse theme variant places the toggle icon after the summary contents, which can be useful for visually aligning the summary with other content.
new tab
UnorderedList content = new UnorderedList(new ListItem("Blake Martin"),
new ListItem("Caroline Clark"), new ListItem("Avery Torres"),
new ListItem("Khloe Scott"), new ListItem("Camila Fisher"),
new ListItem("Gavin Lewis"), new ListItem("Isabella Powell"),
new ListItem("Zoe Wilson"));
Details details = new Details("Members (8)", content);
details.setOpened(true);
details.addThemeVariants(DetailsVariant.REVERSE);
add(details);Disabling
Details can be disabled to prevent them from being expanded or collapsed. Components inside a disabled expanded Details are automatically disabled as well.
new tab
UnorderedList content = new UnorderedList(new ListItem("Blake Martin"),
new ListItem("Caroline Clark"), new ListItem("Avery Torres"),
new ListItem("Khloe Scott"), new ListItem("Camila Fisher"),
new ListItem("Gavin Lewis"), new ListItem("Isabella Powell"),
new ListItem("Zoe Wilson"));
Details details = new Details("Members (8)", content);
details.setEnabled(false);
add(details);Best Practices
Use Details to group related content and to reduce the chance of overwhelming the user with information. However, avoid putting important information in a Details component unless it’s expanded by default. Otherwise, the user might not notice it.
Details can be used instead of Accordion if there’s a need to see content from multiple collapsible content areas, simultaneously.
The expandable and collapsible nature of Details can sometimes be difficult for users to discover. Use the filled variant and apply a tooltips to make this more discoverable.