Tout ce que vous pourriez vouloir savoir sur le bouton Kendo UI

Comment créer et concevoir un beau bouton personnalisé dans Kendo UI? Découvrez comment créer facilement le bouton idéal pour vos applications Web.

Bonjour et bienvenue dans la série de vidéos Angular et Kendo UI Unite. Si vous êtes nouveau dans la série, je vous suggère de consulter le premier message ou de regarder la série de vidéos sur lesquelles sont basés ces messages. Ceci est le deuxième numéro et nous allons parler de boutons.

Si vous voulez regarder la vidéo, vous pouvez plonger ici:

Dans le premier message nous avons pu créer notre application Angular, puis installer Kendo UI et commencer à utiliser notre tout premier composant, le bouton. Cependant, nous n’avons pas eu le temps d’examiner tout ce qui existe, car il existe de nombreuses autres options.

Trouvez le code à suivre, ici sur mon Github!

Nous avons donc ici notre application avec les boutons nous avons construit la dernière fois dans le composant du panneau de commande de bouton. Nous avons un k-block (un bloc de Kendo) et à l'intérieur de notre liste de boutons d'apparences différentes:

  

     Bouton par défaut 
     Bouton Outline 
     Bouton nue 
     Capture d'écran de Button 
  

Ensuite, je veux montrer que vous pouvez réellement ajouter quelques éléments à votre bouton Kendo UI. Pour le moment, nous contrôlons l'apparence avec cette liaison de propriété [look] mais vous pouvez en réalité effectuer plusieurs opérations, telles que désactiver, définir un bouton comme bouton principal, activer ou désactiver le bouton ou lui donner une icône. Alors commençons et je vais vous montrer ces choses! Il est bon de savoir cependant qu’ils utilisent tous la liaison de propriété, qui se trouve entre crochets. Si vous avez besoin d'un rafraîchisseur de reliure angulaire, consultez ce message que j'ai écrit !

Liaison de propriété pour personnaliser les boutons

Comme vous l'imaginiez probablement, pour désactiver un bouton, nous allons procéder. et mis disabled comme égal à true: [disabled] = "true" .

Désormais, ce dernier bouton de la liste est désactivé. Peasy assez facile. Continuons et créons un autre bouton, mais celui-ci sera un bouton principal. Je lui donne le texte de Primary Action mais ce serait vraiment quelque chose comme le bouton Soumettre au bas d'un formulaire ou un bouton de paiement sur un panier d'achat. L'objectif principal de la page devrait être l'objectif principal.

   Action primaire 

Ensuite, basculez vers le haut. Nous allons créer le bouton suivant que nous allons créer, en définissant simplement [toggleable] = "true" .

   Toggleable 

AVERTISSEMENT: Si vous Si vous utilisez des boutons de Kendo UI antérieurs à 4.1.3, vous devrez épeler l’attribut toggleable togglable .

La dernière fonction dont nous allons parler maintenant est celle des icônes. Vous pouvez réellement définir icon égal à une chaîne avec le nom de l'icône. Regardons le calendrier. Celui-là est assez scandaleux. : D

    Icon Button 

Vous pouvez voir que nous avons le bouton d'icône, très sexy, avec l'icône de calendrier. Et vous pensez peut-être à vous-même, comment puis-je savoir quelles autres icônes sont à ma disposition? Explorons ensemble la documentation pour en savoir plus sur les icônes. À partir de nos icônes de bouton docs vous pouvez naviguer ici vers une liste complète des icônes intégrées fournies!

C'est ainsi que nous savons quelles icônes nous sont disponibles.

Dans la section suivante, je vais commenter certains de nos boutons précédents afin que nous puissions en jouer davantage avec nos magnifiques boutons d'icônes.

Groupe de boutons

Nous avons créé un bouton Kendo. Groupe dans lequel vous pouvez réellement envelopper vos boutons. Il les regroupe joliment. Les bords des boutons extérieurs présentent un joli coin arrondi, tandis que le bouton du milieu est carré. Il semble donc qu’ils forment un groupe cohésif, ce qui est superbe. agréable. Il y a un joli combo d'appartenir à l'élément de kendo-buttongroup ainsi qu'à avoir un jeu paramétrable qui donne ce look distinct:

   Icon Button 
   Icon Button 
   Icône de bouton 

Donner à un groupe de boutons la pleine largeur

Vous pouvez également configurer ce groupe de boutons en mode étendu width, en définissant width à 100% .

   Bouton d'icône 
   Bouton d'icône 
   Bouton d'icône 

L'apparition d'un groupe de boutons donnant une apparence désactivée ou nue

Il y a quelques autres caractéristiques que je voulais aborder. Nous avons déjà parlé de la façon dont nous pouvons modifier l'apparence individuelle de chaque bouton. Vous pouvez également le faire pour tous les boutons d'un groupe de boutons Kendo UI également très facilement. Ainsi, à l'intérieur du groupe de boutons de Kendo UI, vous pouvez simplement dire "look égal", puis des valeurs telles que les valeurs par défaut, les contours, etc. Essayons les contours.

   Icon Button 
   Icon Button 
   Icon Button 

Comme pour les boutons individuels, vous pouvez modifier la propriété désactivée ou l'apparence des contours, des surfaces nues ou des surfaces nues en les définissant sur true groupe de boutons lui-même.

Le produit fini

 Bouton désactivé 
 Action principale 
 Basculable 


   Bouton icône 
   Bouton icône 
   Bouton icône 

J'espère que vous avez aimé apprendre davantage sur les boutons de Kendo UI. Il y a en fait deux composants supplémentaires, le bouton déroulant et le bouton fractionné dans lesquels nous n'avons pas le temps de plonger dans cette série de blogs, mais nos docs en parlent nous avons des exemples étonnants. S'il vous plaît vérifiez-les si vous êtes curieux, ils sont géniaux! Je vous reverrai ici pour la prochaine partie de Angular et de Kendo UI Unite.

Si vous êtes nouveau dans Kendo UI pour Angular, vous pouvez en apprendre plus ici ou simplement sauter dans un . ] essai gratuit de 30 jours aujourd'hui.