Zum Hauptinhalt springen

AppLayout

In ChatGPT öffnen
Schatten dwc-app-layout 23.06
Java API

Die AppLayout-Komponente bietet Ihnen eine fertige Seitenstruktur mit einem festen Header und Footer, einem Drawer, der ein- und ausgeblendet werden kann, und einem scrollbaren Inhaltsbereich. Zusammen decken diese Abschnitte die Layout-Anforderungen für Dashboards, Administrationspanels und die meisten mehrteiligen Benutzeroberflächen ab.

Funktionen​

Das webforJ App Layout ist eine Komponente, die den Aufbau gängiger App-Layouts ermöglicht.

  • Einfach zu bedienen und anzupassen
  • Responsives Design
  • Mehrere Layout-Optionen
  • Funktioniert mit dem webforJ Dunkelmodus

Es bietet einen Header, einen Footer, einen Drawer und einen Inhaltsbereich, die alle in eine responsive Komponente integriert sind, die leicht angepasst werden kann, um gängige App-Layouts wie ein Dashboard schnell zu erstellen. Der Header und der Footer sind fest, der Drawer gleitet in und aus dem Ansichtsbereich, und der Inhalt ist scrollbar.

Jeder Teil des Layouts ist ein Div, der jede gültige webforJ-Steuerung enthalten kann. Für die besten Ergebnisse sollte die App ein Viewport-Meta-Tag enthalten, das viewport-fit=cover enthält. Das Meta-Tag sorgt dafür, dass der Viewport so skaliert wird, dass er den Bildschirm des Geräts ausfüllt.

@AppMeta(name = "viewport", content = "width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=no")

Überblick​

Das folgende Codebeispiel führt zu einer App mit einem umklappbaren Sidebar, das ein Logo und Registerkarten für verschiedene Inhaltsoptionen sowie einem Header enthält. Die Demo verwendet die dwc-icon-button-Webkomponente, um einen Schalter für den Drawer zu erstellen. Der Button hat das Attribut data-drawer-toggle, das den DwcAppLayout anweist, auf Klickereignisse von dieser Komponente zu hören, um den Status des Drawers umzuschalten.

Code anzeigen

Vollbreite Navbar​

Standardmäßig rendert das AppLayout den Header und den Footer im Off-Screen-Modus. Der Off-Screen-Modus bedeutet, dass die Position von Header und Footer angepasst wird, um neben dem geöffneten Drawer zu passen. Wenn dieser Modus deaktiviert wird, nehmen der Header und der Footer den gesamten verfügbaren Platz ein und verschieben die obere und untere Position des Drawers, um mit dem Header und dem Footer übereinzustimmen.

AppLayout myApp = new AppLayout();

myApp.setHeaderOffscreen(false);
myApp.setFooterOffscreen(false);
Code anzeigen

Mehrere Toolbars​

Die Navbar hat keine Einschränkung in der Anzahl der Toolbars, die Sie hinzufügen können. Eine Toolbar ist eine horizontale Containerkomponente, die eine Reihe von Aktionsbuttons, Symbolen oder anderen Steuerelementen enthält. Um eine zusätzliche Toolbar hinzuzufügen, verwenden Sie einfach die Methode addToHeader(), um eine weitere Toolbar-Komponente hinzuzufügen.

Die folgende Demo zeigt, wie man zwei Toolbars verwendet. Die erste enthält den Schalter für den Drawer und den Titel der App. Die zweite Toolbar enthält ein sekundäres Navigationsmenü.

Code anzeigen

Sticky Toolbars​

Eine sticky Toolbar ist eine Toolbar, die oben auf der Seite sichtbar bleibt, wenn der Benutzer nach unten scrollt, während die Höhe der Navbar verkleinert wird, um mehr Platz für den Inhalt der Seite verfügbar zu machen. In der Regel enthält diese Art von Toolbar ein festes Navigationsmenü, das für die aktuelle Seite relevant ist.

Es ist möglich, sticky Toolbars mit der CSS-Benutzerdefinierten Eigenschaft --dwc-app-layout-header-collapse-height und der Option AppLayout.setHeaderReveal() zu erstellen.

Wenn AppLayout.setHeaderReveal(true) aufgerufen wird, ist der Header beim ersten Rendern sichtbar und wird dann ausgeblendet, wenn der Benutzer anfängt, nach unten zu scrollen. Sobald der Benutzer wieder nach oben scrollt, wird der Header wieder sichtbar.

Mit Hilfe der CSS-Benutzerdefinierten Eigenschaft --dwc-app-layout-header-collapse-height kann gesteuert werden, wie viel von der Header-Navbar ausgeblendet wird.

Code anzeigen

Mobile Navigationslayout​

Die untere Navbar kann verwendet werden, um eine andere Version der Navigation am unteren Rand der App bereitzustellen. Diese Art der Navigation ist besonders in mobilen Apps beliebt.

Beachten Sie, wie der Drawer in der folgenden Demo ausgeblendet ist. Das AppLayout-Widget unterstützt drei Drawer-Positionen: DrawerPlacement.LEFT, DrawerPlacement.RIGHT und DrawerPlacement.HIDDEN.

Genauso wie AppLayout.setHeaderReveal(), wird AppLayout.setFooterReveal() unterstützt. Wenn AppLayout.setFooterReveal(true) aufgerufen wird, ist der Footer beim ersten Rendern sichtbar und wird ausgeblendet, wenn der Benutzer anfängt, nach oben zu scrollen. Sobald der Benutzer wieder nach unten scrollt, wird der Footer wieder sichtbar.

Standardmäßig, wenn die Bildschirmbreite 800px oder weniger beträgt, wechselt der Drawer in den Popover-Modus. Dies wird als Breakpoint bezeichnet. Der Popover-Modus bedeutet, dass der Drawer über den Inhaltsbereich mit einem Overlay angezeigt wird. Es ist möglich, den Breakpoint zu konfigurieren, indem Sie die Methode setDrawerBreakpoint() verwenden und der Breakpoint muss eine gültige Media Query sein.

Code anzeigen

Drawer-Dienstprogramme​

Die Drawer-Dienstprogramme der AppLayout sind für die integrierte Navigation und kontextuelle Menüs innerhalb des Haupt-App-Layouts konzipiert, während Standalone Drawer Komponenten flexible, unabhängige Schiebe-Panels bieten, die überall in Ihrer App für zusätzlichen Inhalt, Filter oder Benachrichtigungen verwendet werden können. Dieser Abschnitt konzentriert sich auf die integrierten Drawer-Funktionen und -Dienstprogramme, die von AppLayout bereitgestellt werden.

Drawer-Breakpoint​

Standardmäßig, wenn die Bildschirmbreite 800px oder weniger beträgt, wechselt der Drawer in den Popover-Modus. Dies wird als Breakpoint bezeichnet. Der Popover-Modus bedeutet, dass der Drawer über den Inhaltsbereich mit einem Overlay angezeigt wird. Es ist möglich, den Breakpoint zu konfigurieren, indem Sie die Methode setDrawerBreakpoint() verwenden und der Breakpoint muss eine gültige Media Query sein.

Zum Beispiel wird im folgenden Beispiel der Drawer-Breakpoint auf 500px oder weniger konfiguriert.

AppLayout demo = new AppLayout();
demo.setDrawerBreakpoint("(max-width:500px)");

Drawer-Titel​

Die AppLayout-Komponente bietet eine Methode addToDrawerTitle(), um einen benutzerdefinierten Titel zu definieren, der in der Drawer-Header angezeigt wird.

layout.addToDrawerTitle(new Div("Menü"));

Drawer-Aktionen​

Die AppLayout-Komponente ermöglicht es Ihnen, benutzerdefinierte Komponenten wie Buttons oder Icons in den Aktionen des Drawer-Headers unter Verwendung der Methode addToDrawerHeaderActions() zu platzieren.

layout.addToDrawerHeaderActions(
  new IconButton(TablerIcon.create("bell")),
);

Es ist möglich, mehrere Komponenten als Argumente zu übergeben:

layout.addToDrawerHeaderActions(
  new IconButton(TablerIcon.create("bell")),
  new Button("Profil")
);

Drawer-Aktionen erscheinen im rechtsbündigen Abschnitt des Headers des Drawers.

Code anzeigen

AppDrawerToggle 24.12​

Die AppDrawerToggle Komponente ist eine serverseitige webforJ-Klasse, die einen Button darstellt, der verwendet wird, um die Sichtbarkeit eines Navigationsdrawers in einem AppLayout umzuschalten. Sie korreliert mit dem clientseitigen <dwc-app-drawer-toggle>-Element und ist standardmäßig so gestaltet, dass sie sich wie ein traditionelles Hamburger-Menü-Icon verhält; dieses Verhalten kann angepasst werden.

Überblick​

Der AppDrawerToggle erweitert IconButton und verwendet standardmäßig das "menu-2"-Symbol aus dem Tabler-Symbolset. Es wird automatisch das Attribut data-drawer-toggle angewendet, um sich mit dem clientseitigen Drawer-Verhalten zu integrieren.

// Keine Ereignisregistrierung erforderlich:
AppLayout layout = new AppLayout();
layout.addToHeader(new AppDrawerToggle());
// Der Drawer-Toggle funktioniert sofort—keine manuellen Ereignis-Listener erforderlich.

Styling​

Loading...