Fermer

juin 4, 2018

Projecteur de composants: Tabstrip


Les bandes d'onglets sont des moyens pratiques de regrouper des éléments connexes. Découvrez comment vous pouvez utiliser l'onglet Tabulation de l'interface utilisateur de Kendo pour améliorer l'interface utilisateur de vos applications.

La dernière fois que vous avez dans cette série, vous avez maîtrisé le menu . Dans cet épisode, vous verrez comment utiliser le TabStrip pour organiser votre contenu. Une bande d'onglets est un regroupement d'éléments qui permet à l'utilisateur de passer d'une vue à l'autre. Il partage certaines similitudes avec un menu mais est fonctionnellement différent. Un menu regroupe des éléments qui ne sont pas liés. D'un autre côté, une bande d'onglets regroupe des éléments liés. Par exemple, sur un site de réseau social, vous pouvez avoir des liens de menu pour les publications, le profil et les paramètres. Sur la page de profil, vous pouvez inclure un TabStrip avec les étiquettes feed, suiveurs et suivants. Il existe deux types de bandes d'onglet : fixes et défilables. Je vais vous expliquer les deux et vous montrer comment les utiliser dans votre projet.

TabStrip de l'interface utilisateur du Kendo corrigé

Un TabStrip fixe a tous ses onglets visibles. Les bandes d'onglets fixes sont utiles lorsque vous avez un petit nombre de vues et qu'il est important que l'utilisateur puisse voir toutes les options disponibles. L'exemple ci-dessus sur la page de profil d'un site social est un bon exemple d'utilisation pour une bande d'onglets fixe. Voici à quoi ressemble une interface utilisateur de Kendo TabStrip avec le code pour la créer:

 Kenti UI Tabstrips




   Kendo UI Tabstrip Exemple 
  
     

  
  • Flux
  • Suiveurs
  • Abonnements [19659012] Contenu pour le flux
Contenu pour les abonnés
Contenu pour le suivi

La fonctionnalité par défaut transforme la liste non ordonnée en une ligne d'éléments qui bascule les vues vers le contenu de l'élément

correspondant. Alternativement, vous n'avez pas besoin d'écrire le code HTML pour le TabStrip . Vous pouvez créer le TabStrip en configurant les options de la méthode .kendoTabStrip . Dans cet exemple, nous configurons le texte pour les étiquettes d'onglet et son contenu:

Les deux premières options, dataTextField et dataContentField définissent les clés qui seront utilisées dans l'objet. L'utilisation d'une source de données pour créer TabStrip est utile lorsque vous avez plusieurs éléments à onglets et que vous ne voulez pas vous préoccuper de l'écriture du code HTML. Vous pouvez résumer les données des onglets à partir de son balisage.

UI Tabulation Scrollable TabStrip

Un TabStrip scrollable a un débordement de contenu qui peut être consulté en appuyant sur un bouton pour déplacer les onglets vers le droite ou à gauche. Ils sont mieux utilisés quand vous avez beaucoup d'onglets et ce n'est pas important qu'ils soient tous montrés à la fois. Il est également utile lorsque vous avez un nombre variable d'onglets et qu'ils peuvent être dynamiquement ajoutés et supprimés dans le TabStrip . Une application de visualisation PDF est un exemple où vous pouvez utiliser une bande de tabulation déroulante, où chaque onglet peut afficher le contenu d'un document. Dans ce cas, vous ne saurez pas à l'avance combien d'onglets seront visibles.

Par défaut, un TabStrip est scrollable lorsque les étiquettes d'onglets étendent la largeur du TabStrip Ce qui suit est un exemple de TabStrip déroulant . Il a été stylisé avec le thème Matériel inclus dans l'interface utilisateur de Kendo.

 Tabulations d'UI Kendo

Puisque les onglets défilants sont parfaits pour le contenu variable, il serait utile d'ajouter ou de supprimer des onglets par programme. Voici comment ajouter des onglets au TabStrip :

 $ (document) .ready (function () {
  const tabstrip = $ ('# tabstrip'). kendoTabStrip (). data ('kendoTabStrip');
  tabstrip.append ([
    {text: 'Feed', content: 'Content for feed'},
    {text: 'Followers', content: 'Content for followers'},
    {text: 'Following', content: 'Content for following'}
  ]);
}); 

Supprimer un onglet est aussi simple qu'appeler tabstrip.remove (arg) et lui passer un sélecteur d'élément, un objet jQuery ou un index d'élément basé sur zéro.

Résumé [19659006] L'avantage d'organiser votre contenu avec le TabStrip est qu'il permet à l'utilisateur de passer rapidement d'une vue à l'autre. Le TabStrip fournit une vue enfant dans le contexte d'une vue de niveau supérieur, sans nécessiter que l'utilisateur quitte la page. Vous pouvez personnaliser davantage votre TabStrip en utilisant des images pour les étiquettes, en changeant l'orientation, et en animant le chargement du contenu.

Dans le prochain épisode, nous aborderons le PanelBar Vous pouvez connaître ce composant comme un accordéon ou un effondrement. Mais ce que vous ne savez pas, c'est les nombreuses façons dont il peut être utilisé dans votre application. Comme avec le Menu et le TabStrip vous verrez comment utiliser efficacement ce composant dans votre code. Jusque-là, entraînez-vous.


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