Master-Detail Layout

[rolfsmeds]

Description

A component for creating responsive master-detail layouts.

Acceptance criteria

• Split can be horizontal or vertical
• Details side can be set to inline or overlay
• Details side can be set to modal or non-modal
• Inline details switches to overlay when master-side min-width reached
• Details side becomes "fullscreen" on small viewports

General criteria

• APIs reviewed

• Design

• Performance

• UX/DX tests in Alpha

• Documentation:

• How to test?

• Limitations:

Security

• Security implications have been taken into account (elaborate or link to product security requirement specification if there are implications)

[jouni]

Detailed specs: https://docs.google.com/document/d/1rcKkuLci6QJrY-b9kwSSGapkWNUPEiq2Rp12zLsfp8Y/edit?tab=t.0#heading=h.h6j4vnb28hjj

[sxp267]

I was using Vaadin+ SideBar. Is this going to be the replica of the same or different? I ask this because I did some customization to accomodate my needs but after seeing this official component release, I thought it is good to wait till March.

[rolfsmeds]

@sxp267 it's definitely similar, but different in that it's more primarily intended for master-detail layouts rather than as a generic sidebar overlay, more but also more flexible to support different configurations. You will probably be able to use it instead of the Vaadin+ SideBar pattern.

Note that Master-Detail Layout is currently slated to ship in 24.8 in June, however, not 24.7 in March.

[sxp267]

Thanks for letting me know. Will this also work for Mobile ? I mean, in mobile, we used to create mulitple views like (I mean navigating from one SideView to another in mobile view ) v1, v2, v3 and when the user is in v3 and when he is clicking back button in v3, it should go to v2 and then from v2 to v1.

Would this also be possilbe in this master-detail layout ?

[rolfsmeds]

I presume you mean e.g. v1 and v2 and maybe v3 are shown in a split-view (e.g. side-by-side) on desktop, where v1 is the "top level" view, v2 is a "subview" under it and v3 a "sub-sub-view" under that, but they're rendered as individual full-page views on mobile? If so, yes, that's precisely one of the purposes of the MDL component – it should be easy to integrate with the routing mechanism so that each view maps to a part in the URL path /v1/v2/v3, which means that clicking the back button from v3 takes you back to v2 (i.e. closes v3 on desktop), and clicking back again takes you to v1 (or closes v2 on desktop).