Aller au contenu principal

Toolbar

Ouvrir dans ChatGPT
Shadow dwc-toolbar 24.12
Java API

Les barres d'outils offrent aux utilisateurs un accès rapide aux actions principales 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 comme 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 occupe toute la largeur de son élément parent et fournit quatre zones de placement, ou emplacements, pour organiser les composants :

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

Chaque emplacement 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 tous les emplacements pris en charge de manière efficace. 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, en particulier 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 parfaitement le long du bord inférieur, la rendant peu intrusive tout en communiquant clairement les progrès aux utilisateurs.

Vous pouvez l'associer à d'autres composants de 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...