Organiser des éléments sur des cartes plutôt que sur une grille peut constituer un moyen élégant et plus convivial pour les mobiles d'afficher des données dans votre application et d'impliquer vos utilisateurs. Découvrez comment utiliser la nouvelle vue de liste de cartes personnalisée dans Kendo UI Builder.
Nous travaillons sans cesse pour faire de Kendo UI Builder le meilleur outil possible pour vous aider à créer rapidement de superbes applications, et nous sommes ravis de commencer notre dernière amélioration. Dans cet article, nous présentons à votre nouvelle vue personnalisée récemment publiée qui rend les enregistrements sous forme de liste, plutôt que sous forme de grille. Dans une vue Liste de cartes, les cartes sont placées les unes à côté des autres sur la page et certaines des données affichées dans les colonnes de la grille sont utilisées pour remplir le contenu d'une carte.
Voici un exemple de la vue Liste de cartes en action.
Affichage de la liste de cartes
Le rendu du contenu en tant que cartes présente de nombreux avantages:
- Ils sont réactifs, ce qui facilite l'adaptation à différentes largeurs d'écran. ] Ils fonctionnent bien sur les appareils mobiles. Un utilisateur ne s'attend pas à voir une grille sur la plupart des appareils mobiles.
- Les utilisateurs peuvent plus facilement rechercher ce qu'ils recherchent (les utilisateurs ne lisent généralement pas de page Web mais une recherche rapide d'informations pertinentes ).
- Les cartes peuvent montrer des images de manière plus pertinente, car elles leur offrent plus d'espace qu'une rangée de la grille. Cela facilite la numérisation rapide du contenu et, ce qui est tout aussi important, le rend agréable à regarder. En d’autres termes, un jeu de cartes est moins intimidant qu’un jeu de lignes.
- Il est plus facile de résumer ce qui est important de montrer dans chaque enregistrement. La carte ne montre généralement que quelques champs et donne au créateur plus de choix visuels en matière de conception visuelle qu'une rangée de la grille.
Il existe certains inconvénients: une grille est plus compacte et permet donc de restituer plus de données. En outre, certains utilisateurs sont habitués au tri et / ou au regroupement par colonnes pour trouver rapidement des enregistrements spécifiques.
Trois types de cartes personnalisées
La vue personnalisée nouvellement publiée s'appelle «images de carte». Elle vous permet de concevoir. cartes qui contiennent une image et du texte dans l’un des trois styles. Il est disponible sur github ici .
Si vous souhaitez suivre, les exemples de données utilisés pour ces exemples sont disponibles ici sous forme de données JSON (voir Objet littéral "destinations"). De même, si vous ne l'avez pas déjà fait, vous pouvez suivre les instructions de ce blog (voir la section sur Configuration du serveur REST ) pour installer un serveur JSON REST en seulement deux. minutes.
La vue personnalisée images-cartes propose actuellement trois types de cartes:
- Image et nom
- Image, prix et nom
- Image, nom et description
Image et nom
Les “Image et nom Nom ”est la carte la plus simple. Il vous permet de créer une liste ressemblant à ceci:
Image, prix et nom
L’image «Image, prix et nom» est le premier exemple que nous avons vu. Elle indique le nom et le prix sur la même ligne:
Image, nom et description
La carte pour “Image, nom et description” se présente comme suit:
L'utilisation de cartes avec des images de cette manière est un motif très courant. Par exemple, Firefox Pocket affiche des résumés d’article comme suit:
Rattrapez le constructeur de Kendo UI
J'ai écrit un numéro de tutoriels et de guides expliquant de nombreuses fonctionnalités de Kendo UI Builder, à commencer par le Introduction aux modèles de Kendo UI Builder . Vous pouvez parcourir tous mes derniers articles sur le sujet ici .
Source link