AppLayout
De AppLayout component biedt een kant-en-klare paginastructuur met een vaste header en footer, een lade die in en uit schuift, en een scrollbaar inhoudsgebied. Samen dekken deze secties de lay-outbehoeften van dashboards, beheerpaneel en de meeste interfaces met meerdere secties.
Kenmerken
De webforJ App Layout is een component waarmee veelvoorkomende app-lay-outs kunnen worden gebouwd.
- Gebruiksvriendelijk en aanpasbaar
- Responsive ontwerp
- Meerdere lay-outopties
- Werkt met webforJ Donkere Modus
Het biedt een header, footer, lade en inhoudssectie die allemaal zijn geïntegreerd in een responsieve component die eenvoudig kan worden aangepast om snel veelvoorkomende app-lay-outs te bouwen, zoals een dashboard. De header en footer zijn vast, de lade schuift in en uit het zicht, en de inhoud is scrollbaar.
Elke deel van de lay-out is een Div, die elke geldige webforJ-besturingselement kan bevatten. Voor de beste resultaten moet de app een viewport-meta-tag bevatten die viewport-fit=cover bevat. De meta-tag zorgt ervoor dat de viewport wordt geschaald om het apparaatdisplay in te vullen.
@AppMeta(name = "viewport", content = "width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=no")
Overzicht
Het volgende codevoorbeeld resulteert in een app met een inklapbare zijbalk die een logo en tabbladen voor verschillende inhoudsopties en een header bevat. De demo gebruikt de dwc-icon-button webcomponent om een knop voor het schakelen van de lade te maken. De knop heeft de data-drawer-toggle-attribuut dat de DwcAppLayout instrueert om naar klikgebeurtenissen van die component te luisteren om de status van de lade te schakelen.
Volledige breedte navigatiebalk
Standaard rendert de AppLayout de header en de footer in de off-screen modus. De off-screen modus betekent dat de positie van de header en de footer zal worden verschoven om naast de geopende lade te passen. Het uitschakelen van deze modus zorgt ervoor dat de header en footer de volledige beschikbare ruimte innemen en dat de lade boven- en onderpositie zich aanpast aan de header en de footer.
AppLayout myApp = new AppLayout();
myApp.setHeaderOffscreen(false);
myApp.setFooterOffscreen(false);
Meerdere toolsbars
De navigatiebalk heeft geen limiet aan het aantal toolsbars dat je kunt toevoegen. Een Toolbar is een horizontale containercomponent die een set actieknoppen, pictogrammen of andere besturingselementen bevat. Om een extra toolbar toe te voegen, kun je eenvoudig de addToHeader()-methode gebruiken om een andere Toolbar-component toe te voegen.
De volgende demo toont hoe je twee toolbars kunt gebruiken. De eerste bevat de knop voor het schakelen van de lade en de titel van de app. De tweede toolbar bevat een secundair navigatiemenu.
Plakkerige toolsbars
Een plakkerige toolbar is een toolbar die zichtbaar blijft bovenaan de pagina wanneer de gebruiker naar beneden scrollt, maar de hoogte van de navigatiebalk wordt ingeklapt om meer ruimte voor de inhoud van de pagina te maken. Gewoonlijk bevat dit soort toolbar een vast navigatiemenu dat relevant is voor de huidige pagina.
Het is mogelijk om plakkerige toolbars te maken met de CSS aangepaste eigenschap --dwc-app-layout-header-collapse-height en de optie AppLayout.setHeaderReveal().
Wanneer AppLayout.setHeaderReveal(true) wordt aangeroepen, is de header zichtbaar bij de eerste weergave, en wordt deze verborgen wanneer de gebruiker begint met naar beneden scrollen. Zodra de gebruiker weer omhoog scrollt, wordt de header weer zichtbaar.
Met de hulp van de CSS aangepaste eigenschap --dwc-app-layout-header-collapse-height is het mogelijk om te regelen hoeveel van de header navigatiebalk verborgen zal zijn.
Mobiele navigatie lay-out
De onderste navigatiebalk kan worden gebruikt om een andere versie van de navigatie onderaan de app te bieden. Dit type navigatie is specifiek populair in mobiele apps.
Let op hoe de lade verborgen is in de volgende demo. De AppLayout-widget ondersteunt drie ladeposities: DrawerPlacement.LEFT, DrawerPlacement.RIGHT, en DrawerPlacement.HIDDEN.
Net zoals AppLayout.setHeaderReveal(), wordt ook AppLayout.setFooterReveal() ondersteund. Wanneer AppLayout.setFooterReveal(true) wordt aangeroepen, is de footer zichtbaar bij eerste weergave en wordt deze verborgen wanneer de gebruiker begint met omhoog scrollen. Zodra de gebruiker weer naar beneden scrollt, wordt de footer weer zichtbaar.
Standaard, wanneer de schermbreedte 800px of minder is, wordt de lade overgeschakeld naar popover-modus. Dit wordt de breakpoint genoemd. De popover-modus betekent dat de lade over het inhoudsgebied met een overlay zal verschijnen. Het is mogelijk om de breakpoint te configureren met de setDrawerBreakpoint()-methode en de breakpoint moet een geldige mediaquery zijn.
Ladehulpmiddelen
De AppLayout ladehulpmiddelen zijn ontworpen voor geïntegreerde navigatie en contextuele menu's binnen de hoofdapp-lay-out, terwijl zelfstandige Drawer componenten flexibele, onafhankelijke schuifpanelen bieden die overal in je app kunnen worden gebruikt voor extra inhoud, filters of meldingen. Deze sectie richt zich op de ingebouwde ladefuncties en -hulpmiddelen die door AppLayout worden aangeboden.
Lade breakpoint
Standaard, wanneer de schermbreedte 800px of minder is, wordt de lade overgeschakeld naar popover-modus. Dit wordt de breakpoint genoemd. De popover-modus betekent dat de lade over het inhoudsgebied met een overlay zal verschijnen. Het is mogelijk om de breakpoint te configureren met de setDrawerBreakpoint()-methode en de breakpoint moet een geldige mediaquery zijn.
Bijvoorbeeld, in het volgende voorbeeld is de lade breakpoint geconfigureerd om 500px of minder te zijn.
AppLayout demo = new AppLayout();
demo.setDrawerBreakpoint("(max-width:500px)");
Lade titel
De AppLayout component biedt een addToDrawerTitle()-methode voor het definiëren van een aangepaste titel die in de ladeheader wordt weergegeven.
layout.addToDrawerTitle(new Div("Menu"));
Ladeacties
De AppLayout component stelt je in staat om aangepaste componenten zoals knoppen of pictogrammen in het ladeheaderactiesgebied te plaatsen met behulp van de addToDrawerHeaderActions()-methode.
layout.addToDrawerHeaderActions(
new IconButton(TablerIcon.create("bell")),
);
Het is mogelijk om meerdere componenten als argumenten door te geven:
layout.addToDrawerHeaderActions(
new IconButton(TablerIcon.create("bell")),
new Button("Profiel")
);
Ladeacties verschijnen in het rechts uitgelijnde gedeelte van de header van de lade.
AppDrawerToggle dwc-icon-button 24.12
De AppDrawerToggle component is een server-side webforJ klasse die een knop vertegenwoordigt die wordt gebruikt om de zichtbaarheid van een navigatielade in een AppLayout te schakelen. Het komt overeen met het client-side <dwc-app-drawer-toggle> element en is standaard gestyled om zich te gedragen als een traditionele hamburger menu-icoon, dit gedrag kan worden aangepast.
Overzicht
De AppDrawerToggle breidt IconButton uit en gebruikt standaard het "menu-2" pictogram uit de Tabler iconenset. Het past automatisch het data-drawer-toggle attribuut toe om te integreren met het client-side ladegedrag.
// Geen gebeurtenisregistratie vereist:
AppLayout layout = new AppLayout();
layout.addToHeader(new AppDrawerToggle());
// De lade-schakelknop werkt direct—geen handmatige gebeurtenislijst vereist.
