Ga naar hoofdinhoud

Toolbar

Open in ChatGPT
Shadow dwc-toolbar 24.12
Java API

Werkbalken 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 goed geschikt voor het beheren van pagina-instellingen en het huisvesten van belangrijke functies zoals een zoekbalk of een notificatieknop.

Organiseren van werkbalkinhoud​

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

  • Begin: 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.

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

De volgende demo laat zien hoe je een Toolbar aan een AppLayout toevoegt en alle ondersteunde slots effectief benut. Om meer te lezen over het implementeren van werkbalken binnen een AppLayout, zie Sticky werkbalken en Mobiele 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 werkbalken of beperkte ruimte. De werkbalk functioneert nog steeds hetzelfde—alleen de hoogte wordt verkleind. Deze modus wordt vaak gebruikt in headers, zijbalken of lay-outs waar de ruimte krap is.

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

ProgressBar in werkbalken​

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, aligneert de ProgressBar netjes langs de onderrand, waardoor deze niet opvalt, terwijl het toch duidelijk de voortgang aan gebruikers communiceert.

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

Toon code

Stijlen​

Thema's​

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

Toon code

Loading...