Skip to content

docs: add MDL detail events #4359

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Jun 16, 2025
Merged

docs: add MDL detail events #4359

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8ba329f
docs: add MDL detail events
sissbruecker Jun 2, 2025
cca628c
wording
sissbruecker Jun 2, 2025
df059b6
wording
sissbruecker Jun 2, 2025
eef5f8f
fix code snippet
sissbruecker Jun 2, 2025
2169378
Merge branch 'latest' into docs/mdl-events
sissbruecker Jun 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 50 additions & 0 deletions articles/components/master-detail-layout/index.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -233,6 +233,56 @@
--


== Hiding the Detail Area

The detail area is automatically shown or hidden when content is added or removed from it. There is no explicit property to control the visibility of the detail area.

Check warning on line 238 in articles/components/master-detail-layout/index.adoc

View workflow job for this annotation

GitHub Actions / lint 

[vale] reported by reviewdog 🐶
[Vaadin.ThereIs] Don't start a sentence with 'There is'.

Raw Output:
{"message": "[Vaadin.ThereIs] Don't start a sentence with 'There is'.", "location": {"path": "articles/components/master-detail-layout/index.adoc", "range": {"start": {"line": 238, "column": 92}}}, "severity": "WARNING"}

Master-Detail Layout exposes the following events that can be used to hide the detail area by removing the content from it:

- `backdrop-click`: Fired when the user clicks on the backdrop of the detail overlay when it is in drawer mode.
- `detail-escape-press`: Fired when the user presses kbd:[Escape] within the detail area.

[.example]
--
ifdef::flow[]
[source,java]
----
<source-info group="Flow"></source-info>
layout.addBackdropClickListener(event -> {
// Hide the detail area by removing the content
layout.setDetail(null);
});

layout.addDetailEscapePressListener(event -> {
// Hide the detail area by removing the content
layout.setDetail(null);
});
----
endif::[]

ifdef::react[]
[source,tsx]
----
<source-info group="React"></source-info>
const selectedPerson = useSignal<Person | null>(null);

const closeDetail = () => {
// Clear selected person to not render the detail content
selectedPerson.value = null;
};

<MasterDetailLayout onBackdropClick={closeDetail} onDetailEscapePress={closeDetail}>
<MasterDetailLayout.Master>
<PersonList onSelect={(person) => { selectedPerson.value = person}} />
</MasterDetailLayout.Master>
<MasterDetailLayout.Detail>
{selectedPerson.value && <PersonDetail person={selectedPerson.value} />}
</MasterDetailLayout.Detail>
</MasterDetailLayout>
----
endif::[]
--

== Router Integration

Master-Detail Layout can be used as a router layout (see <<{articles}/flow/routing/layout#, Flow>>/<<{articles}/hilla/guides/routing#adding-layout-routes, Hilla>>), so that nested views are automatically rendered in the details area of the component. This allows showing nested views without having to manage the contents of the details area manually when the route changes, while providing the same benefits such as responsive behavior that the component normally provides.
Expand Down