Pleins feux sur: Barres d'outils

Les barres d'outils sont des éléments d'interface utilisateur importants pour contenir une liste de commandes. Apprenez comment vous pouvez facilement créer une barre d'outils qui améliorera l'expérience de vos utilisateurs.

J'espère que vous vous sentez à l'aise avec les groupes de boutons et . Ensuite, nous allons jeter un coup d'œil à la ToolBar . La barre d'outils est un conteneur pour une liste de commandes. Vous les avez peut-être vus utilisés dans des éditeurs de photos ou des visionneuses de documents. Dans un éditeur, une ToolBar peut inclure des commandes pour changer la police, ajuster l'interligne et insérer des images.

Ce qui différencie un ToolBar dans Kendo UI d'autres composants comme un Menu est qu'il a déjà un certain nombre d'éléments intégrés que vous attendez à trouver dans une ToolBar . Plus précisément, vous pouvez ajouter des boutons, des groupes de boutons, des boutons de division et des éléments personnalisés à votre barre d'outils . Dans cette leçon, nous allons parcourir la création d'une barre d'outils utilisant chacune de ces fonctionnalités.

Une barre d'outils est construite en ajoutant des éléments aux éléments tableau à l'intérieur de la méthode kendoToolBar . Chaque élément du tableau est un objet constitué de paires clé-valeur décrivant comment construire le composant. La spécification du type détermine l'aspect et le comportement du composant. Un bouton type est un élément autonome dans la barre d'outils . Il peut s'agir de texte, d'une icône ou des deux. Ceci est un bouton de menu qui utilise le thème par défaut Kendo UI.

Voici le code standard pour créer ce bouton. Vous pouvez le tester dans le dojo .

Un groupe de boutons relie les éléments liés entre eux. C'est un moyen de décomposer visuellement le contenu de la barre d'outils . Mais plus important encore, cela aide lorsque vous voulez communiquer à l'utilisateur qu'il ne peut sélectionner qu'une ou plusieurs options d'un groupe. Dans un éditeur de texte, vous pouvez donner à l'utilisateur la possibilité d'aligner son texte à gauche, à droite ou au centre. Ils ne peuvent faire qu'une sélection, il est donc logique de présenter les options comme un groupe de boutons. Pour créer un groupe de boutons, définissez le type de l'élément sur buttonGroup et ajoutez les configurations de chaque bouton à un tableau buttons . Voici notre menu avec un groupe de boutons ajouté:

Un bouton de division est un menu déroulant qui a été appelé comme un bouton en deux parties. La première partie du bouton est le texte ou l'icône. La deuxième partie est une flèche cliquable qui ouvre le menu. Vous avez peut-être vu un bouton de division dans un éditeur utilisé pour sélectionner la taille de la police ou comme un menu pour les commandes de fichiers comme l'enregistrement, le téléchargement et la création de nouveaux documents. Pour créer un bouton de division, définissez le type sur splitButton et ajoutez chaque élément de menu au tableau menuButtons . C'est le bouton de division que j'ai ajouté à notre barre d'outils:

Modèle

Lorsque vous souhaitez ajouter un élément à la barre d'outils qui ne fait pas partie des types prédéfinis, vous utilisez un modèle. Par exemple, les éléments d'entrée ne sont pas un type spécifié, de sorte qu'ils seraient candidats à un modèle. Pour créer un modèle, au lieu d'utiliser le champ tapez ajoutez un champ modèle à l'objet qui est une chaîne d'un élément HTML. Vous pouvez ajouter des attributs au modèle comme vous le feriez normalement ou vous pouvez les lister dans le champ attributs de l'objet. Le champ attributs est un objet avec chaque clé étant un attribut, et la valeur est la valeur de l'attribut. Tous les éléments de la barre d'outils peuvent avoir leurs attributs définis.

 {template: ''},

{type: 'button', texte: 'Find', attributs: {id: 'btn-find', classe: 'k-primary'}} 

Dans cet exemple, j'ai donné un ID et une classe au bouton. Cependant, les éléments ont déjà un champ ID pouvant être défini. Cela inclut des éléments individuels dans un groupe de boutons et des éléments de menu dans un bouton fractionné

Conclusion

Chaque élément d'une barre d'outils est un bouton destiné à exécuter une action. Un élément ToolBar non mentionné est le séparateur. Un séparateur n'a aucun comportement. C'est un élément visuel qui ajoute une ligne verticale entre les éléments. Ceci est utile lorsque vous souhaitez regrouper des commandes qui n'appartiennent pas à un groupe de boutons. Une autre fonctionnalité de la barre d'outils Kendo Toolbar est que vous pouvez personnaliser l'apparence du contenu de débordement. Par défaut, lorsque la largeur de l'écran est inférieure à la barre d'outils les éléments de débordement seront remplacés par une icône "plus". Vous pouvez spécifier si les éléments ToolBar doivent ou non déborder et quelle est leur apparence dans l'état de débordement.

Restez à l'écoute – la prochaine fois, nous regarderons le composant treeview

Voulez-vous essayer l'interface utilisateur de Kendo?

Vous voulez commencer à profiter de la barre d'outils Kendo UI autres 70+ composants prêts à l'emploi Kendo UI, comme Grille ou Scheduler ? Vous pouvez commencer un essai gratuit de Kendo UI aujourd'hui et commencer à développer vos applications plus rapidement.

Démarrer mon KI UI Trial

Ressources

---