Découvrez comment l'interface utilisateur de Kendo supprime la douleur de la création d'un PanelBar entièrement fonctionnel et stylé
Si vous lisez l'article précédent de cette série, vous savez maintenant comment TabStrip les composants sont utilisés dans la navigation pour afficher le contenu associé mais différent sur une page. Le prochain composant à conquérir est le PanelBar .
Un PanelBar est un conteneur avec des sections empilées verticalement les unes sur les autres pouvant être développées ou réduites. Une utilisation pour un PanelBar consiste à organiser une hiérarchie de navigation profonde. Dans un projecteur précédent vous avez vu comment réaliser une navigation imbriquée en utilisant des listes déroulantes en cascade dans le composant Menu . C'est bien quand vous avez seulement quelques liens dans la liste déroulante. Cependant, lorsque la liste déroulante devient trop profonde, il est préférable de placer ces liens enfants dans un PanelBar . Ensuite, je vais vous montrer comment Kendo UI prend la peine de créer un PanelBar entièrement fonctionnel et stylé .
Basic Barre de Navigation
Tout d'abord, jetons un coup d'oeil au code minimal nécessaire pour implémenter un PanelBar . Le balisage est similaire à la création d'un menu. Vous utiliserez un élément
- pour la racine du composant. Chaque élément
agit comme un panneau. Tout élément
imbriqué dans un élément
est le contenu qui sera affiché lorsque le panneau est développé. Ceci est un exemple de PanelBar qui a été stylée en utilisant le thème Kendo UI Bootstrap :
{font-famille: helvetica; }
-
Livres
- Sci-Fi
- Jeune adulte
- Non-Fiction
-
Films
- Comédie
- Action
- Sci-Fi
-
Électronique
- Téléphones
- Ordinateurs
- Téléviseurs
Dans un composant PanelBar la sélection d'un lien pousse le contenu vers le bas pour révéler le sous-menu. Alors que dans un composant la sélection d'un lien révèle une liste déroulante qui définit le contenu de la page.
Construction d'un PanelBar à partir d'une source de données
Vous pouvez ignorer l'écriture baliser et configurer votre PanelBar à travers ses options. Construire votre PanelBar à partir d'une source de données par opposition à coder en dur le code HTML vous donne plus de flexibilité. Au lieu de considérer le composant comme HTML, vous pouvez le considérer comme des données. Lorsque vous souhaitez modifier le composant, vous pouvez modifier ses données ou utiliser l'une de ses méthodes. C'est le code refactorisé pour créer notre navigation en utilisant l'option dataSource :
Autres utilisations pour une barre de panneau
Une barre de panneau peut également être utilisée comme contrôleur pour éditer le contenu. Si vous construisiez une application de retouche photo, vous pourriez avoir un PanelBar avec un panneau de calques, un panneau de couleurs et un panneau d'historique. La sélection d'un panneau révélerait l'outil. La vue de chaque outil peut occuper un espace considérable et cacher le contenu dans les panneaux permet de bien organiser l'espace de travail de l'utilisateur
Un PanelBar peut également être utilisé pour diriger une série d'actions ou d'étapes. Dites que vous avez un formulaire de commande et que vous avez besoin que l'utilisateur fournisse son adresse de livraison, son mode de livraison et son mode de paiement. Vous ne voulez pas demander toutes les informations à l'avance, mais vous ne voulez pas non plus mettre les informations sur des pages différentes. Au lieu de cela, vous utilisez un PanelBar pour diviser le flux de paiement en plusieurs parties. Voici un exemple de ce à quoi ressemblerait votre formulaire de commande:
Comparaison des composants de navigation
Dans cette série, plusieurs composants ont été introduits. Il peut être déroutant de savoir quand utiliser chaque type. Il peut sembler qu'ils font la même chose mais ne diffèrent que par leur apparence. Ce n'est pas le cas. Choisir le bon composant au bon endroit rend votre application plus utilisable. Les principaux composants de navigation que vous avez vus jusqu'ici sont ButtonGroup Menu TabStrip et maintenant PanelBar .
Ci-dessous un résumé avec quelques informations de base à garder à l'esprit:
Conclusion
Le Barre de vous donne un autre moyen de afficher et masquer le contenu Cette dissimulation d'informations est importante pour éviter de submerger l'utilisateur avec trop de choix. Vous avez plusieurs choix pour la conception de la navigation, mais vous n'avez pas à en choisir un seul. Vous pouvez et devriez combiner des composants. Vous pouvez avoir un menu avec quelques liens fixés en haut de votre page et un bouton qui ouvre un tiroir de navigation fait à partir d'un PanelBar . Expérimentez pour voir ce qui fonctionne le mieux pour vous.
J'ai mentionné dans le tableau ci-dessus que les groupes de boutons peuvent être utilisés pour les barres d'outils. Eh bien, il n'est pas nécessaire d'utiliser un groupe de boutons pour créer une barre d'outils car Kendo UI a un composant de barre d'outils que nous avons également couvert dans cette série de projecteurs . Et il a beaucoup plus de fonctionnalités afin de personnaliser le comportement exactement comme vous le souhaitez. Si vous avez suivi, vous avez acquis suffisamment de connaissances pour tester vos compétences en Kendo sur des applications dans la nature.
Vous voulez essayer l'interface utilisateur de Kendo Vous voulez commencer à profiter de la barre d'outils de l'interface utilisateur de Kendo ou de l'un des 70 autres composants de l'interface utilisateur de Kendo? Grille ou Planificateur ? Vous pouvez commencer un essai gratuit de Kendo UI aujourd'hui et commencer à développer vos applications plus rapidement.
Commencer mon test d'interface utilisateur de Kendo
Les commentaires sont désactivés en mode prévisualisation.
[ad_2]
Source link