Overslaan naar hoofdinhoud

Toolbar

Openen in ChatGPT
Schaduw 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-controles en het huisvesten van belangrijke functies zoals een zoekbalk of een notificatieknop.

Organizing toolbar content​

De Toolbar organiseert essentiële componenten in een gemakkelijk toegankelijke en consistente lay-out. Standaard neemt deze de volledige breedte van zijn bovenliggende element in beslag en biedt 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 die veel aandacht vereisen, zoals zoeken of navigatie.
  • 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 laat zien hoe je een Toolbar aan een AppLayout toevoegt en alle ondersteunde slots effectief benut. Voor meer informatie over het implementeren van werkbalken binnen een AppLayout, zie Sticky toolbars en Mobile navigation layout.

Toon Code

Compact mode​

Gebruik setCompact(true) om de padding rond een Toolbar te verminderen. Dit is handig wanneer je meer inhoud op het scherm moet passen, vooral in apps met gestapelde werkbalken of beperkte ruimte. De werkbalk gedraagt zich nog steeds hetzelfde—alleen de hoogte is verminderd. 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 toolbars​

Een ProgressBar dient als een visuele indicator voor lopende processen, zoals het laden van gegevens, het uploaden van bestanden of het voltooien van stappen in een stroom. Wanneer deze in een Toolbar is geplaatst, staat de ProgressBar netjes langs de onderrand, waardoor deze niet opdringerig is en 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

Styling​

Themes​

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

Toon Code

Loading...