MasterDetailLayout component

[rolfsmeds]

A component for creating layouts typical for master-detail views, with a list or table on the left/top and a form or other type of content representing the selected item on the right side.

• Supports rendering as
  • A horizontal or vertical split between master and detail (with or without movable splitter between)
  • A horizontal or vertical overlay panel (modal or non-modal)
• Responsive out of the box
  • Automatically switches from split to overlay if split doesn’t fit in viewport
  • Automatically renders as full-screen on small viewports (e.g. mobile)
• Can be nested, i.e. the detail layout can itself be a master-detail layout with its own configuration.
• The sizes of the master and detail are configurable, how the available space is distributed between them.
• Modern transition animations
• Easy to hook to router to map the component's state (selection in master and contents in detail) to the URL path

PRD (not public): https://docs.google.com/document/d/1RTso2qYngQyA1dKkjFOVlP2sNCsNRlTAj4sAAtIPVx4/edit