Comment facilement afficher des images par URL avec Kendo UI Builder

Avec Kendo UI Builder, il est facile de créer des composants personnalisés pour présenter rapidement des données dans votre application. Dans cet article, découvrez comment afficher des images à partir d'une URL stockée dans des données.

Lors de la création d'applications, vous devrez peut-être afficher une image à partir d'une URL stockée dans des données. Imaginez ce scénario: Vous devez afficher un nom de destination de voyage et son image associée, et les deux sont disponibles à partir de données JSON, sous la forme d'une chaîne pour le nom de destination et d'une URL d'image pour l'image. Dans cet article, nous verrons comment utiliser Kendo UI Builder pour créer facilement un composant permettant de restituer des images à partir d'une URL extraite d'une source de données.

Configuration initiale

ici dans le dossier des composants.

Suivez les étapes décrites dans la première publication de cette série pour installer ce modèle dans votre application cible. Notez que l'exemple est spécifique au framework Angular (il n'est pas applicable au framework AngularJS).

Mise en route

Le composant possède des propriétés qui vous permettent de configurer le modèle de données à utiliser et quel champ de celui-ci model contient l'URL de l'image (il s'agit du champ des données JSON qui ont l'URL de l'image). Si vous le souhaitez, vous pouvez configurer le titre de l'image, qui sera utilisé comme attribut title de la balise img.

Voici un exemple d'utilisation du composant.

Le composant est conçu pour bien s'intégrer dans le système de grille responsive. L'image sera automatiquement redimensionnée pour tenir dans l'espace disponible de la colonne.

Vous trouverez ci-dessous un exemple avec la zone de liste déroulante utilisant 25% de l'espace d'affichage disponible, tandis que l'image absorbe les 75% restants. Voici comment il rend avec un écran large de 670px:

Et voici comment il est rendu avec une largeur de 1024px:

Le composant a été implémenté en utilisant les techniques apprises précédemment dans cette série:

1. Introduction aux composants personnalisés pour Kendo UI Builder
2. Création de composants personnalisés pour Kendo UI Builder
3. Obtenir des données provenant de sources de données est similaire à la publication, Affichage de métriques de périphériques IoT avec Kendo UI Builder
4. Vous pouvez également consulter cet article sur Composants personnalisés du générateur de Kendo UI à valeur unique et à valeurs multiples (ce composant est un composant à valeur unique)

J'espère que vous trouverez ce composant utile en l'état. Cependant, il est facile de l'adapter à vos besoins. Par exemple, le composant est actuellement implémenté pour une URL d'image absolue dans les données JSON. Dans certains cas, le champ URL peut être relatif. Il serait relativement facile d'adapter ce composant pour prendre une propriété de chemin de base qui serait ajoutée au champ URL.

Dans un prochain article, nous verrons comment combiner ce composant et quelques composants à venir pour créer une page de destination. Comme d'habitude, restez à l'écoute.

Catch Up sur le Kendo UI Builder

Si vous avez sauté dans cette série au milieu et que vous voulez commencer depuis le début, vous pouvez trouver les articles précédents: [19659025] Introduction aux modèles de Kendo UI Builder