Ga naar hoofdinhoud

AppLayout

Open in ChatGPT
Shadow dwc-app-layout 23.06
Java API

De AppLayout is een uitgebreide responsieve lay-outcomponent die een header, een footer, een lade en een inhoudssectie biedt. De header en footer zijn vast, de lade schuift in en uit het viewport, en de inhoud is scrollbaar.

Deze component kan worden gebruikt om gemeenschappelijke app-lay-outs te bouwen, zoals een dashboard.

Kenmerken​

De webforJ App Layout is een component waarmee gemeenschappelijke app-lay-outs kunnen worden gebouwd.

  • Gemakkelijk te gebruiken en aan te passen
  • Responsief ontwerp
  • Meerdere lay-outopties
  • Werkt met de webforJ Donkere Modus

Het biedt een header, footer, lade, en inhoudssectie die allemaal zijn ingebouwd in een responsieve component die gemakkelijk kan worden aangepast om snel gemeenschappelijke app-lay-outs, zoals een dashboard, te bouwen. De header en footer zijn vast, de lade schuift in en uit het viewport, en de inhoud is scrollbaar.

Elk deel van de lay-out is een Div, die elke geldige webforJ-besturing 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 het viewport wordt geschaald om het scherm van het apparaat te vullen.

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

Overzicht​

De volgende codevoorbeeld resulteert in een app met een inklapbare zijbalk die een logo en tabs voor verschillende inhoudsopties en een header bevat. De demo gebruikt de dwc-icon-button webcomponent om een knop voor het omzetten van de lade te maken. De knop heeft de data-drawer-toggle-attribuut, die de DwcAppLayout instrueert om klikgebeurtenissen van die component te luisteren om de lade-status om te schakelen.

Toon code

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 verschuiven om naast de geopende lade te passen. Het uitschakelen van deze modus zal ertoe leiden dat de header en footer de volledige beschikbare ruimte innemen en de bovenste en onderste positie van de lade verschuiven om bij de header en footer te passen.

AppLayout myApp = new AppLayout();

myApp.setHeaderOffscreen(false);
myApp.setFooterOffscreen(false);
Toon code

Meerdere werkbalken​

De navigatiebalk heeft geen limiet aan het aantal werkbalken dat je kunt toevoegen. Een Toolbar is een horizontale containercomponent die een set actieknoppen, pictogrammen of andere bedieningselementen bevat. Om een extra werkbalk toe te voegen, gebruik je gewoon de addToHeader()-methode om een andere Toolbar-component toe te voegen.

De volgende demo laat zien hoe je twee werkbalken kunt gebruiken. De eerste bevat de knop voor het omzetten van de lade en de titel van de app. De tweede werkbalk bevat een secundair navigatiemenu.

Toon code

Plakkerige werkbalken​

Een plakkerige werkbalk is een werkbalk die zichtbaar blijft bovenaan de pagina wanneer de gebruiker omlaag scrollt, maar de hoogte van de navigatiebalk is samengevouwen om meer ruimte beschikbaar te maken voor de inhoud van de pagina. Meestal bevat dit soort werkbalk een vast navigatiemenu dat relevant is voor de huidige pagina.

Het is mogelijk om plakkerige werkbalken te creëren met behulp van 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 render, en wordt deze verborgen wanneer de gebruiker begint te scrollen. Zodra de gebruiker weer omhoog begint te scrollen, zal de header worden onthuld.

Met de hulp van de CSS-aangepaste eigenschap --dwc-app-layout-header-collapse-height is het mogelijk om te controleren hoeveel van de header-navigatiebalk verborgen zal worden.

Toon code

Mobiele navigatie lay-out​

De onderste navigatiebalk kan worden gebruikt om een andere versie van de navigatie aan de onderkant van 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 als bij AppLayout.setHeaderReveal(), wordt AppLayout.setFooterReveal() ondersteund. Wanneer AppLayout.setFooterReveal(true) wordt aangeroepen, is de footer aanvankelijk zichtbaar en wordt deze verborgen wanneer de gebruiker begint te scrollen. Zodra de gebruiker weer begint te scrollen, zal de footer worden onthuld.

Standaard, wanneer de schermbreedte 800px of minder is, zal de lade worden overgeschakeld naar de popover-modus. Dit wordt de breekpunt genoemd. De popover-modus betekent dat de lade boven de inhoudszone met een overlay zal verschijnen. Het is mogelijk om de breekpunt te configureren met behulp van de setDrawerBreakpoint()-methode en de breekpunt moet een geldige mediaquery zijn.

Toon code

Lade-hulpmiddelen​

De AppLayout lade-hulpmiddelen 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 aanvullende inhoud, filters of meldingen. Deze sectie richt zich op de ingebouwde lade-functies en hulpmiddelen die door AppLayout worden aangeboden.

Lade-breekpunt​

Standaard, wanneer de schermbreedte 800px of minder is, zal de lade worden overgeschakeld naar de popover-modus. Dit wordt de breekpunt genoemd. De popover-modus betekent dat de lade boven de inhoudszone met een overlay zal verschijnen. Het is mogelijk om de breekpunt te configureren met behulp van de setDrawerBreakpoint()-methode en de breekpunt moet een geldige mediaquery zijn.

Bijvoorbeeld, in het volgende voorbeeld is de lade-breekpunt 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 om een aangepaste titel te definiëren die in de lade-header moet worden weergegeven.

layout.addToDrawerTitle(new Div("Menu"));

Lade-acties​

De AppLayout component stelt je in staat om aangepaste componenten zoals knoppen of pictogrammen in het lade-header-actiesgebied 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")
);

Lade-acties verschijnen in de rechts uitgelijnde sectie van de header van de lade.

Toon code

AppDrawerToggle 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 om 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 van de Tabler-iconenset. Het past automatisch het data-drawer-toggle attribuut toe om te integreren met het client-side lade gedrag.

// Geen eventregistratie vereist:
AppLayout layout = new AppLayout();
layout.addToHeader(new AppDrawerToggle());
// De lade-toggle zal out of the box werken—geen handmatige gebeurtenisluisteraars nodig.

Stijlen​

Loading...