Overslaan naar hoofdinhoud

Toolbar

Openen in ChatGPT
Schaduw dwc-toolbar 24.12
Java API

Toolbars bieden gebruikers snelle toegang tot kernacties 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 bedieningen en het huisvesten van belangrijke functies zoals een zoekbalk of een meldingsknop.

Organisatie van toolbarinhoud​

De Toolbar organiseert essentiële componenten in een eenvoudig toegankelijk en consistent lay-out. Standaard neemt het de volledige breedte van zijn ouder element in en biedt vier plaatsingsgebieden, of slots, voor het organiseren van componenten:

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

Elk slot heeft een methode om componenten toe te voegen: addToStart(), addToTitle(), addToContent(), en addToEnd().

De volgende demo laat zien hoe je een Toolbar toevoegt aan een AppLayout en gebruik maakt van alle ondersteunde slots.

Om meer te lezen over het implementeren van toolbars binnen een AppLayout, zie Sticky toolbars en Mobiel navigatielay-out.

Toon Code

Compacte modus​

Gebruik setCompact(true) om de padding rond een Toolbar te verminderen. Dit is handig 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 de ruimte beperkt 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 in een Toolbar wordt geplaatst, sluit de ProgressBar netjes aan de onderrand aan, waardoor deze onopvallend blijft terwijl deze toch duidelijk de 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 omvatten zeven ingebouwde thema's voor snelle visuele aanpassing:

Toon Code

Loading...