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 de base 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 héberger 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 occupe 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 ou logos des applications.
  • Contenu : Pour des actions très visibles 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 l'implémentation des barres d'outils dans un AppLayout, consultez Sticky toolbars et Mobile navigation layout.

Afficher le code

Mode compact​

Utilisez setCompact(true) pour réduire le rembourrage autour d'une Toolbar. Cela est utile lorsque vous devez faire tenir plus de contenu à l'écran, notamment dans les 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​

Un 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'il est placé dans une Toolbar, le ProgressBar s'aligne proprement le long du bord inférieur, ce qui le rend peu intrusif tout en communiquant clairement les progrès aux utilisateurs.

Vous pouvez le 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...