Overslaan naar hoofdinhoud

Toolbar

Openen in ChatGPT
Schaduw dwc-toolbar 24.12
Java API

Toolbars bieden gebruikers snelle toegang tot kernactiviteiten en navigatie-elementen. De webforJ Toolbar component is een horizontale container die een set actieknoppen, pictogrammen of andere componenten kan bevatten. Het is bijzonder geschikt voor het beheren van pagina-instellingen en het huisvesten van belangrijke functies zoals een zoekbalk of een notificatieknop.

Inhoud van de toolbar organiseren​

De Toolbar organiseert essentiële componenten in een gemakkelijk toegankelijke en consistente lay-out. Standaard neemt het de volledige breedte van zijn bovenliggende element in beslag en biedt het vier plaatsingsgebieden, of slots, voor het organiseren van componenten:

  • Start: Bevat meestal een AppDrawerToggle of een startknop.
  • Titel: Gebruikt voor app-namen of logo's.
  • Inhoud: Voor acties met hoge aandacht zoals zoeken of navigeren.
  • Einde: Minder frequente acties, zoals gebruikersprofiel of hulp.

Elk slot heeft een methode voor het toevoegen van componenten: addToStart(), addToTitle(), addToContent(), en addToEnd().

De volgende demo toont hoe je een Toolbar toevoegt aan een AppLayout en alle ondersteunde slots effectief benut. Om meer te lezen over het implementeren van toolbars binnen een AppLayout, zie Sticky toolbars en Mobiele navigatielayout.

Toon Code

Compacte modus​

Gebruik setCompact(true) om de padding rond een Toolbar te verminderen. Dit is nuttig wanneer je meer inhoud op het scherm wilt passen, vooral in apps met gestapelde toolbars of beperkte ruimte. De toolbar gedraagt zich nog steeds hetzelfde—alleen de hoogte is verminderd. Deze modus wordt vaak gebruikt in kopteksten, zijbalken of lay-outs waar ruimte schaars is.

Toolbar toolbar = new Toolbar();
toolbar.setCompact(true);
Toon Code

ProgressBar in toolbars​

Een ProgressBar dient als visuele indicator voor lopende processen, zoals het laden van gegevens, het uploaden van bestanden of het voltooien van stappen in een flow. Wanneer deze binnen een Toolbar is geplaatst, wordt de ProgressBar netjes langs de onderrand uitgelijnd, waardoor deze onopvallend is terwijl deze duidelijk voortgang aan gebruikers communiceert.

Je kunt het combineren met andere componenten in de toolbar zoals knoppen of labels zonder de lay-out te verstoren.

Toon Code

Styling​

Thema's​

Toolbar componenten bevatten zeven ingebouwde thema's voor snelle visuele aanpassing:

Toon Code

Loading...