Fermer

mai 31, 2018

Projecteur de composants: Menus


Maintenant que vous avez ajouté les boutons et groupes de boutons à votre arsenal d'UI Kendo, vous êtes prêt pour votre prochain outil, le menu.

Un menu est une liste d'éléments qui montre comment le contenu de votre application est structuré. Il sert de guide pour vos utilisateurs, une carte qu'ils peuvent utiliser pour naviguer sur votre site.

L'organisation de votre menu détermine la façon dont les utilisateurs peuvent utiliser votre application. Avez-vous déjà visité un site et il était difficile de trouver ce que vous cherchiez? Peut-être y avait-il trop de liens cachés dans les sous-menus ou l'organisation n'était pas intuitive. Lorsqu'il est utilisé correctement, le menu est un outil très puissant pour le guerrier Kendo UI à manier. Dans cette leçon, vous apprendrez comment transformer un menu ordinaire en un menu d'interface utilisateur de Kendo super puissant .

Menu HTML

Une façon de créer un menu consiste à utiliser un nav élément avec des liens à l'intérieur. Cet élément n'applique aucun style ou comportement particulier aux liens, il sert simplement à rendre votre code plus lisible. Une autre façon de créer un menu est d'utiliser des listes non ordonnées. Les listes sont particulièrement utiles lorsque vous devez imbriquer des menus. Voici un exemple d'organisation d'un menu qui a un sous-menu utilisant des listes:

Les sous-menus sont créés en imbriquant un élément ul à l'intérieur d'un élément li . C'est l'apparence par défaut pour un menu qui utilise des listes:

Kendo UI Menu

Bien que cette liste montre comment le contenu est structuré, il n'a pas l'air invitant. Nous pouvons utiliser le HTML de notre exemple précédent et le transformer en un menu Kendo UI en ajoutant $ ('# menu'). KendoMenu () à notre code. Cela nous donnera un menu correctement stylisé pour le menu principal et les sous-menus. Les listes imbriquées se transforment en menus déroulants animés pour glisser en vue lorsque la souris survole les éléments du menu.

Voici le code complet pour créer le menu:




   Kendo UI Example 
  
     

    

Outre les menus en cascade, des comportements et des configurations supplémentaires peuvent être ajoutés à vos menus. Les menus de l'interface utilisateur de Kendo proposent des méthodes permettant d'activer et de désactiver les éléments de menu ainsi que de modifier dynamiquement le contenu du menu en insérant et en supprimant des éléments. C'est le même menu, mais son orientation a changé:

 $ ('# menu'). KendoMenu ({
  orientation: 'verticale'
}); 

Menu contextuel de l'interface utilisateur de Kendo

L'interface utilisateur de Kendo permet également de créer des menus contextuels. Un menu contextuel est un menu qui affiche le contenu correspondant à l'état actuel de l'application. Le menu par défaut est masqué et il apparaît lorsque vous cliquez avec le bouton droit sur la cible. Par exemple, lorsque vous faites un clic droit à l'intérieur de votre éditeur de texte, vous pouvez avoir l'option de couper, copier et coller l'élément. Un menu contextuel pour un lecteur de musique peut afficher les options permettant d'ajouter ou de supprimer un morceau. Voici un exemple d'un menu contextuel de Kendo UI qui a été ouvert:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temporel incididunt ut labore et dolore magna aliqua.

  • Share
  • Email
  • S'abonner

Résumé

Le menu est l'ancre de votre application. Les menus imbriqués fournissent des chemins permettant d'intégrer l'utilisateur dans votre application et les menus contextuels offrent des options pour interagir de différentes manières avec votre application. En son cœur, les menus sont sur le choix. Les éléments que vous mettez dans votre menu fournissent les choix que l'utilisateur peut faire. Ces choix créent leur expérience. Les choix que vous faites et les choix que vous cachez révèlent le contenu que vous priorisez.

Cependant, le menu n'est pas le seul moyen pour les utilisateurs de naviguer dans votre application. Un TabStrip est une autre option pour organiser le contenu de votre site. Au cours de votre voyage pour devenir un guerrier Kendo UI, vous devrez maîtriser en utilisant un TabStrip afin de prendre vos sites au niveau suivant. Restez à l'écoute pour le prochain blog dans notre série de projecteurs de composant où nous couvrons le TabStrip .

Ressources


Les commentaires sont désactivés en mode prévisualisation.
[ad_2]
Source link