Verwendung
Bottom Sheets zeigen ergänzende Inhalte und Aktionen auf einem mobilen Bildschirm an. Sie sind eine vielseitige Komponente, die eine große Vielfalt an Informationen und Layouts enthalten können, darunter Menü-Elemente, Linklisten, Text- und Inhalts-Elemente, Aktionen wie Buttons und weitere Formularelemente, Suche, die Funktionen hinter Kontextmenüs, ergänzende Inhalte und vieles mehr. Bottom Sheets werden nur in mobilen Anwendungen verwendet.
Ein Container, der die Funktionalität bereitstellt, ist das einzige erforderliche Element eines Bottom Sheets. Das Layout der Inhalte des Bottom Sheets kann und wird entsprechend der darin enthaltenen Inhaltsarten stark variieren; die Größe wird durch den Platz bestimmt, den diese Elemente einnehmen.
Trennlinien können optional verwendet werden, um zusammengehörigen Inhalt in den Bottom Sheets zu gruppieren. In Bottom Sheets kann unabhängig vom restlichen Bildschirminhalt bei Bedarf horizontal oder vertikal gescrollt werden.
Normale Bottom Sheets
Normale Bottom Sheets existieren neben dem Haupt-UI des Screens und ermöglichen die gleichzeitige Anzeige von Bereichen und die Interaktion mit beiden. Verwenden Sie ein normales Bottom Sheet, um Inhalte anzuzeigen, die den primären Inhalt des Bildschirms ergänzen.
Bottom Sheets werden angezeigt, wenn sie durch eine Benutzeraktion ausgelöst werden, z. B. durch Tippen auf eine Schaltfläche. Sie können wie folgt geschlossen werden:
- Tap auf ein Menüelement oder eine Aktion im Bottom Sheet
- Das Bottom Sheets nach unten wischen
- Verwenden eines optionalen Schließen-Buttons im oberen Bereich des Bottom Sheets
Bottom Sheets bieten bei Bedarf eine Erweiterungsoption, mit der ein Sheet mit höherem Platzbedarf vollständig erweitert und zwischen einem eingeklappten und einem ausgeklappten Zustand umgeschaltet werden kann.
Modale Bottom Sheets
Wie Modale Dialoge werden modale Bottom Sheets schwebend über dem Inhalt der Anwendung angezeigt. Wenn sie angezeigt werden, dann werden alle anderen Funktionen der Anwendung deaktiviert und ausgegraut. Die eigentlichen Inhalte verbleiben auf dem Screen, bis eine erforderliche Aktion ausgeführt oder verworfen wurde.
Um einen schnellen Zugriff auf die obersten Aktionen zu ermöglichen, ist die anfängliche vertikale Position der modalen Bottom Sheets auf calc(100% - 3rem) der Bildschirmhöhe begrenzt. Wenn der Inhalt calc(100% - 3rem) der Bildschirmhöhe überschreitet, dann können Sheets auf die gesamte Bildschirmhöhe aufgezogen und auch innerhalb gescrollt werden, um auf die überfließenden Inhalte zuzugreifen.
Positionierung & responsives Verhalten
Ab dem Breakpoint XS (≥ 0px)
Bei den kompakten Fenstergrößen von Mobilgeräten erstrecken sich die Bottom Sheets über die gesamte Bildschirmbreite und liegen über den Hauptinhalt eines Screens.
Bei voller Bildschirmhöhe enthalten die normalen Bottom Sheets ein Symbol zum Minimieren, damit sie zu ihrer Ausgangsposition zurückzukehren.
Ab dem Breakpoint MD (≥ 768px)
Bei größeren Bildschirmen in mittleren bis großen Geräteklassen haben Bottom Sheets eine maximale Breite, um unerwünschte Layouts der Inhalte zu vermeiden. Dies kann jedoch bei Bedarf überschrieben werden. Erwägen Sie für komplexere Aufgaben und Abläufe die Verwendung von Dialogen oder Kontextmenüs.
Do’s and Dont’s
So:
- Der Inhalt muss zusätzlich oder zweitrangig sein.
- Bottom Sheets können ausgeblendet werden, um wieder mit dem eigentlichen Inhalt zu interagieren.
So nicht:
- Wesentliche Hauptinhalte der Anwendung im Bottom Sheet
- Bottom Sheets in Desktop-Ansichten
