Kendo UI Builder est livré avec de nombreux composants intégrés et prend également en charge l'implémentation de composants personnalisés. Découvrez quatre nouveaux composants personnalisés qui peuvent être utilisés conjointement pour créer des vues modernes intéressantes.
Dans ce blog, nous allons voir un ensemble de nouveaux composants personnalisés et comment ils peuvent être combinés pour créer des vues intéressantes. vues modernes. Les composants récemment publiés sont:
- Composant de carte
- Nouveau composant de notation
- Libellé dynamique personnalisé
- Composants URL d'image améliorés
Tous ces composants peuvent:
- être déployés avec cliquez sur la configuration des données pour effectuer le rendu
- Rendez les données de n'importe quelle source de données
- Jouez bien dans le système de grille
- Utilisez sans codage supplémentaire.
Ils sont tous disponibles dans github ici .
Le reste de ce blog est divisé en deux parties: La première partie montre des exemples utilisant ces composants et met en évidence diverses propriétés, la seconde décrit les composants de
Combinaison des composants
Dans ce premier exemple, nous proposons un service REST fournissant des données pour les destinations de voyage. Les trois composants sont liés à différents champs du même enregistrement de source de données. Lorsqu'une destination est sélectionnée dans la vue, nous affichons le nom de la destination, son classement et une image.
Notez comment:
- Les composants d'étiquette et d'évaluation utilisent 50% de la largeur de l'image
- Le composant d'évaluation est aligné à droite du conteneur
J'espère que vous trouverez ces composants utiles dans vos propres applications, telles quelles. Comme le code source complet est disponible à partir de github ici vous pouvez les personnaliser en fonction de vos besoins. Ils peuvent également être utilisés comme point de départ pour vos propres composants.
Ci-dessous, vous trouverez la description des composants.
Dans le prochain blog, nous verrons comment créer des vues modernes en utilisant un conteneur de cartes au lieu d'un rendu de grille traditionnel. Restez à l'écoute:)
Description des composants
Composant de la carte
Ce composant est disponible dans ici et est basé sur la bibliothèque de cartes OpenLayer Le composant est principalement piloté par les coordonnées (nombres de latitude et de longitude) obtenues à partir de la source de données.
On suppose que les données REST pour ces nombres sont disponibles dans les champs lon et lat. Si vous avez un schéma différent, vous pouvez simplement modifier les noms de propriété dans components / custom-olmap-comp / angular / template.html.ejs dans les lignes suivantes:
[lon] = "$ dataModels. . lon "
[lat] = " $ dataModels. . lat "
.lon et .lat à votre nom de champ correspondant.
Vous spécifiez également quelle hauteur vous souhaitez que la carte soit. La largeur sera automatiquement ajustée pour s'adapter au conteneur dans le système de grille.
Voici toutes les propriétés:
Nous ajoutons ceci aux propriétés de l'application Kendo UI Builder, en tête. Voir cette Documentation du Kendo UI Builder pour savoir comment faire.
Ce composant est disponible dans github ici . Ses principales améliorations sont:
1. La possibilité d'afficher la plage de notation. Lorsque ce mode est activé, nous affichons toujours cinq icônes de notation et ne colorons que les icônes correspondant à la classification. Par exemple, une cote à trois étoiles donnerait trois icônes de couleur et deux icônes grisées, comme ceci: 
En outre, vous pouvez aligner l'étiquette à droite, à gauche ou au centre du conteneur, ainsi que modifier la taille de la police et spécifier les marges.
Voici la liste des propriétés:
Source link