La nouvelle vue personnalisée de la liste de cartes dans Kendo UI Builder

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:

1. 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.
2. 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 ).
3. 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.
4. 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:

1. Image et nom
2. Image, prix et nom
3. 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:

Avec cette nouvelle vue personnalisée de liste de cartes pour Kendo UI Builder, vous pouvez désormais facilement en tirer parti.

Comment utiliser la vue personnalisée de Card-Images

Cliquez sur les propriétés et la section suivante.

Vous allez d'abord configurer une source de données et un fournisseur de données, puis afficher la liste des noms de champs de sources de données. Ce sont les champs que vous pouvez utiliser pour placez le contenu de votre service REST sur la carte.Par exemple, avec mon service REST, je reçois:

Vous sélectionnerez ensuite le type de carte à utiliser. Pour cet exemple, nous utilisons: [19659003]

Ensuite, nous mappons les champs de source de données sur les éléments de la carte:

Dès que nous avons mappé certains champs, la carte affiche des exemples de données dans le canevas du concepteur, ce qui nous donne une idée de la manière dont la carte et la liste de cartes vont 10 cartes sont affichées par défaut.

Notez que nous avons laissé le champ de description vide, car cette carte n'utilise pas ce champ. Si nous mappions un champ là-bas de toute façon, cela n'aurait aucun impact. 19659003] À ce stade, nous pouvons déjà générer la vue et obtenir le rendu de la vue de la liste des cartes.

Nous pouvons améliorer le style en ajustant diverses propriétés. Dans mon cas, j'ai ajusté la carte. hauteur et largeur, l'espacement entre les cartes et les couleurs assorties comme ceci:

Enfin, pour rendre le prix en gras et pour rendre le prix et le nom plus lisibles, j'ai utilisé le style CSS pour ajuster la taille et le poids de la police, comme suit:

Nom CSS: font-size: 1.4rem; margin-left: 5px;

Prix CSS: taille de police: 1.4rem; poids de police: gras; margin-right: 10px;

Vous pouvez également définir une icône comme préfixe pour le nom, prix ou description utilisant ces propriétés de concepteur:

Voici un exemple de carte dans laquelle nous avons sélectionné icône de valise pour le champ de nom et icône de devise pour le champ de prix:

Explorer et Prolonger cet exemple

J'espère que cette vue personnalisée vous sera utile lors de votre exploration Kendo UI Builder . N'hésitez pas à l'étendre pour les besoins de votre entreprise ou à l'utiliser comme point de départ pour votre propre utilisation vues – le code source complet est disponible ici .

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 .