ionic-team / ionic-team/ionic-framework

feat: Master Detail View Support

Abierto
#22,930 2 comentarios 4 reacciones 0 asignados Ver en GitHub
package: core type: feature request
Lenguaje dominante
TypeScript
Estrellas
52.7k
Forks
13.3k
Merge medio
1 d 15 h
PR fusionados (30 d)
51

Descripción

# Feature Request

**Ionic version:**
[x] **5.x**

**Describe the Feature Request**

A component or set of components that allow developers to create a master detail view that is responsive based on view port size. On operating systems such as iOS (specifically iPhone Pro MAX) and iPadOS when in landscape layouts applications like Mail and Gmail provide a list view on the left (master) and selected email on the right (detail).

**Use Case 1 -- Device Rotation Landscape -> Portrait - No Detail Selected**

When the device is rotated to portrait view the list (master) is displayed if no item was selected

**Use Case 2 -- Device Rotation Landscape -> Portrait - Detail Selected**

1. When the device is rotated to portrait when an email (detail) is selected it will be displayed.
2. If user dismisses the email (detail) they are sent back to the list (master).

**Use Case 3-- Device Rotation Portrait -> Landscape - No Detail Selected**

1. When the device is rotated to landscape view the list (master) is displayed with an developer provided optional "fallback" detail view
2. When the device is rotated to landscape view the list (master) is displayed and the developer can optionally configure the default item in the list to be displayed in the detail view

**Use Case 4 -- Device Rotation Portrait -> Landscape - Detail Selected**

When the device is rotated to landscape view the list (master) is displayed and the email (detail) is also displayed

As one with expect with other Ionic components platform animations would exist to match the look and feel for iOS, iPadOS and Android.

A feature like this is critical to support user experiences on iPadOS where users may want to invoke [Split View](https://support.apple.com/guide/ipad/open-two-items-in-split-view-ipad08c9970c/ipados) or [Slide Over](https://support.apple.com/guide/ipad/open-an-app-in-slide-over-ipadfe7c65e9/14.0/ipados/14.0).

See the _Additional Context_ section below for examples

**Describe Preferred Solution**

A set of components that allow for the use cases described above.

**Describe Alternatives**

We've considered using the `IonSplitPane` but it doesn't work for the use cases described above. The primary reason is that the different content areas have different navigation stacks and without a shared navigation stack they can't implement the use cases above.

The only other alternative is to build this manually using CSS Media Queries and different rendering trees. This is a complex task especially when considering animations across platforms.

**Related Code**

None

**Additional Context**

1. [Example of taking an app in Slide Over](https://youtu.be/ITzy5J3j5Is?t=76) on iPadOS and expanding it full screen. This illustrates going from a detail view to a master -> detail view.
2. [Example of using Split View](https://www.youtube.com/watch?v=nSBZKr5kXYM). This illustrates how you go from a master -> detail to a smaller size with detail on top and the "back" button visible.
3. Other examples of iPadOS Apple apps that implement a master -> detail pattern: Messages, Notes, Calendar, Settings, Music, Reminders, Stocks, Files.

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.