Skip to content

MasterDetailLayout component #7963

@rolfsmeds

Description

@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

Image

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions