Passer au contenu principal

Toolbar

Ouvrir dans ChatGPT
Ombre dwc-toolbar 24.12
Java API

Les barres d'outils offrent aux utilisateurs un accès rapide aux actions essentielles et aux éléments de navigation. Le composant webforJ Toolbar est un conteneur horizontal qui peut contenir un ensemble de boutons d'action, d'icônes ou d'autres composants. Il est bien adapté pour gérer les contrôles de page et abriter des fonctions clés telles qu'une barre de recherche ou un bouton de notification.

Organisation du contenu de la barre d'outils​

La Toolbar organise les composants essentiels dans une mise en page facilement accessible et cohérente. Par défaut, elle prend toute la largeur de son élément parent et fournit quatre zones de placement, ou slots, pour organiser les composants :

  • Début : Contient généralement un AppDrawerToggle ou un bouton d'accueil.
  • Titre : Utilisé pour les noms d'application ou les logos.
  • Contenu : Pour les actions nécessitant une attention particulière comme la recherche ou la navigation.
  • Fin : Actions moins fréquentes, telles que le profil utilisateur ou l'aide.

Chaque slot a une méthode pour ajouter des composants : addToStart(), addToTitle(), addToContent(), et addToEnd().

La démo suivante montre comment ajouter une Toolbar à un AppLayout et utiliser efficacement tous les slots pris en charge. Pour en savoir plus sur la mise en œuvre des barres d'outils dans un AppLayout, consultez Barres d'outils collantes et Mise en page de navigation mobile.

Afficher le code

Mode compact​

Utilisez setCompact(true) pour réduire l'espacement autour d'une Toolbar. Cela est utile lorsque vous devez faire tenir plus de contenu à l'écran, surtout dans des applications avec des barres d'outils empilées ou un espace limité. La barre d'outils se comporte toujours de la même manière—seule la hauteur est réduite. Ce mode est couramment utilisé dans les en-têtes, les barres latérales ou les mises en page où l'espace est restreint.

Toolbar toolbar = new Toolbar();
toolbar.setCompact(true);
Afficher le code

ProgressBar dans les barres d'outils​

Une ProgressBar sert d'indicateur visuel pour les processus en cours, tels que le chargement de données, le téléchargement de fichiers ou l'achèvement d'étapes dans un flux. Lorsqu'elle est placée à l'intérieur d'une Toolbar, la ProgressBar s'aligne bien le long du bord inférieur, la rendant peu intrusive tout en communiquant clairement les progrès aux utilisateurs.

Vous pouvez la combiner avec d'autres composants dans la barre d'outils, comme des boutons ou des étiquettes, sans perturber la mise en page.

Afficher le code

Style​

Thèmes​

Les composants Toolbar incluent sept thèmes intégrés pour une personnalisation visuelle rapide :

Afficher le code

Loading...