AppLayout
Die AppLayout-Komponente bietet Ihnen eine gebrauchsfertige Seitenstruktur mit einem festen Header und Footer, einem Schrank, der hinein- und herausgleitet, sowie einem scrollbaren Inhaltsbereich. Zusammen decken diese Abschnitte die Layoutbedürfnisse von Dashboards, Admin-Panels und den meisten mehrteiligen Schnittstellen ab.
Funktionen
Das webforJ App Layout ist eine Komponente, die es ermöglicht, gängige App-Layouts zu erstellen.
- Einfach zu bedienen und anzupassen
- Responsives Design
- Verschiedene Layout-Optionen
- Kompatibel mit dem webforJ Dunkelmodus
Es bietet einen Header, Footer, Schrank und einen Inhaltsbereich, die alle in eine responsive Komponente integriert sind, die leicht angepasst werden kann, um schnell gängige App-Layouts wie ein Dashboard zu erstellen. Der Header und Footer sind fixiert, der Schrank gleitet in und aus dem Ansichtsfenster und der Inhalt ist scrollbar.
Jeder Teil des Layouts ist ein Div, das jede gültige webforJ-Steuerung enthalten kann. Für beste Ergebnisse sollte die App ein Viewport-Meta-Tag enthalten, das viewport-fit=cover enthält. Das Meta-Tag bewirkt, dass das Viewport an die Anzeige des Geräts skaliert wird.
@AppMeta(name = "viewport", content = "width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=no")
Übersicht
Das folgende Codebeispiel ergibt eine App mit einer einklappbaren Seitenleiste, die ein Logo und Registerkarten für verschiedene Inhaltsoptionen sowie einen Header enthält. Die Demo verwendet die webkomponente dwc-icon-button, um einen Schrank-Umschaltknopf zu erstellen. Der Knopf hat das Attribut data-drawer-toggle, das den DwcAppLayout anweist, auf Klickereignisse von dieser Komponente zu hören, um den Schrankstatus umzuschalten.
Vollbreite Navbar
Standardmäßig rendert das AppLayout den Header und den Footer im Offscreen-Modus. Der Offscreen-Modus bedeutet, dass die Position von Header und Footer verschoben wird, um neben dem geöffneten Schrank zu passen. Das Deaktivieren dieses Modus führt dazu, dass Header und Footer den gesamten verfügbaren Platz einnehmen und die Position von Schrank oben und unten verschoben wird, um mit dem Header und Footer übereinzustimmen.
AppLayout myApp = new AppLayout();
myApp.setHeaderOffscreen(false);
myApp.setFooterOffscreen(false);
Mehrere Werkzeugleisten
Die Navbar hat keine Begrenzung für die Anzahl der Werkzeugleisten, die Sie hinzufügen können. Eine Toolbar ist eine horizontale Containerkomponente, die eine Reihe von Aktionsschaltflächen, Symbolen oder anderen Steuerelementen enthält. Um eine zusätzliche Werkzeugleiste hinzuzufügen, verwenden Sie einfach die Methode addToHeader(), um eine weitere Toolbar-Komponente hinzuzufügen.
Die folgende Demo zeigt, wie man zwei Werkzeugleisten verwendet. Die erste beherbergt den Schrank-Umschaltknopf und den Titel der App. Die zweite Werkzeugleiste enthält ein sekundäres Navigationsmenü.
Sticky Werkzeugleisten
Eine sticky Werkzeugleiste ist eine Werkzeugleiste, die oben auf der Seite sichtbar bleibt, wenn der Benutzer nach unten scrollt, während die Höhe der Navbar zusammengeklappt wird, um mehr Platz für den Seiteninhalt zu schaffen. Normalerweise enthält diese Art von Werkzeugleiste ein festes Navigationsmenü, das für die aktuelle Seite relevant ist.
Es ist möglich, sticky Werkzeugleisten mit der CSS-Custom-Property --dwc-app-layout-header-collapse-height und der Option AppLayout.setHeaderReveal() zu erstellen.
Wenn AppLayout.setHeaderReveal(true) aufgerufen wird, wird der Header beim ersten Rendern sichtbar und dann ausgeblendet, wenn der Benutzer beginnt, nach unten zu scrollen. Sobald der Benutzer wieder nach oben scrollt, wird der Header wieder angezeigt.
Mit Hilfe der CSS-Custom-Property --dwc-app-layout-header-collapse-height kann gesteuert werden, wie viel von der Header-Navi ausgeblendet wird.
Mobiles Navigationslayout
Die untere Navbar kann verwendet werden, um eine andere Version der Navigation am unteren Ende der App bereitzustellen. Diese Art der Navigation ist insbesondere in mobilen Apps beliebt.
Beachten Sie, wie der Schrank in der folgenden Demo ausgeblendet ist. Das AppLayout-Widget unterstützt drei Schrankpositionen: DrawerPlacement.LEFT, DrawerPlacement.RIGHT und DrawerPlacement.HIDDEN.
Ähnlich wie AppLayout.setHeaderReveal() wird auch AppLayout.setFooterReveal() unterstützt. Wenn AppLayout.setFooterReveal(true) aufgerufen wird, wird der Footer beim ersten Rendern sichtbar und dann ausgeblendet, wenn der Benutzer beginnt, nach oben zu scrollen. Sobald der Benutzer wieder nach unten scrollt, wird der Footer wieder angezeigt.
Standardmäßig wird der Schrank bei einer Bildschirmbreite von 800px oder weniger in den Popover-Modus geschaltet. Dies wird als Breakpoint bezeichnet. Der Popover-Modus bedeutet, dass der Schrank über den Inhaltsbereich mit einer Überlagerung poppt. Es ist möglich, den Breakpoint mit der Methode setDrawerBreakpoint() zu konfigurieren, und der Breakpoint muss eine gültige Media Query sein.
Schrankdienstprogramme
Die AppLayout-Schrankdienstprogramme sind für die integrierte Navigation und kontextbezogene Menüs innerhalb des Haupt-App-Layouts ausgelegt, während eigenständige Drawer Komponenten flexible, unabhängige Schiebepanels bieten, die überall in Ihrer App für zusätzliche Inhalte, Filter oder Benachrichtigungen verwendet werden können. Dieser Abschnitt konzentriert sich auf die integrierten Schrankfunktionen und -dienstprogramme, die von AppLayout bereitgestellt werden.
Schrank-Breakpoint
Standardmäßig wird der Schrank bei einer Bildschirmbreite von 800px oder weniger in den Popover-Modus geschaltet. Dies wird als Breakpoint bezeichnet. Der Popover-Modus bedeutet, dass der Schrank über den Inhaltsbereich mit einer Überlagerung poppt. Es ist möglich, den Breakpoint mit der Methode setDrawerBreakpoint() zu konfigurieren, und der Breakpoint muss eine gültige Media Query sein.
Zum Beispiel wird im folgenden Beispiel der Schrank-Breakpoint auf 500px oder weniger konfiguriert.
AppLayout demo = new AppLayout();
demo.setDrawerBreakpoint("(max-width:500px)");
Schranktitel
Die AppLayout-Komponente bietet eine Methode addToDrawerTitle(), um einen benutzerdefinierten Titel im Schrankheader anzuzeigen.
layout.addToDrawerTitle(new Div("Menü"));
Schrankaktionen
Die AppLayout-Komponente ermöglicht es Ihnen, benutzerdefinierte Komponenten wie Schaltflächen oder Symbole in den Schrankheader-Aktionsbereich mithilfe 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")
);
Schrankaktionen erscheinen im rechtsbündigen Abschnitt des Headers des Schranks.
AppDrawerToggle dwc-icon-button 24.12
Die AppDrawerToggle Komponente ist eine serverseitige webforJ-Klasse, die einen Knopf darstellt, der verwendet wird, um die Sichtbarkeit eines Navigationsschranks in einem AppLayout umzuschalten. Es entspricht dem clientseitigen <dwc-app-drawer-toggle>-Element und ist standardmäßig so gestaltet, dass es wie ein traditionelles Hamburger-Symbol funktioniert. Dieses Verhalten kann angepasst werden.
Übersicht
Der AppDrawerToggle erweitert IconButton und verwendet standardmäßig das "menu-2"-Symbol aus dem Tabler-Symbolsatz. Es wird automatisch das data-drawer-toggle-Attribut angewendet, um sich in das clientseitige Verhalten des Schranks zu integrieren.
// Keine Ereignisregistrierung erforderlich:
AppLayout layout = new AppLayout();
layout.addToHeader(new AppDrawerToggle());
// Der Schrank-Umschalter funktioniert sofort – keine manuellen Ereignislistener erforderlich.
