Dans ce deuxième exemple, vous pouvez voir le classement et les composants de l'étiquette sont placés sous l'image et sont alignés respectivement à gauche et à droite.L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Composants angulaires de Kendo UI Builder pour des vues modernes
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
Dans le premier exemple, nous avons inséré un espacement vertical via la propriété bottom de la marge alors que dans le deuxième exemple nous avons utilisé la marge supérieure.
Dans ce troisième et dernier exemple ci-dessous, nous avons ajouté le composant map pour afficher une vue combinant les quatre composants:
Le composant de carte occupe 100% de la largeur disponible et est configuré avec une hauteur spécifique (400 pixels).
Dans tous ces exemples, la puissance de Kendo UI Builder est au premier plan. Les vues ont été créées en faisant simplement glisser les composants sur le canevas du concepteur et en définissant ou en ajustant certaines propriétés en quelques clics.
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. <%- model %>. lon "
[lat] = " $ dataModels. <%- model %>. 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:
Enfin, pour utiliser ce composant, vous devrez inclure ces deux fichiers dans la tête ( voir la doc OpenLayer ici ):
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: 
Lorsque le mode est désactivé , nous montrons seulement des icônes pour la valeur de notation, comme ceci: 
Il existe de nombreux scénarios où vous pourriez avoir besoin de couleurs ou d'icônes différentes. heureusement, nous ne sommes pas limités à une simple cote bleue. En quelques clics, nous pouvons sélectionner une icône et une couleur différentes avec les propriétés de concepteur suivantes:
Voici un exemple avec un symbole dollar vert: 
2. Possibilité de spécifier les propriétés de marge supérieure et inférieure. Maintenant, vous pouvez aligner le composant avec d'autres composants du système de grille en quelques clics seulement, sans avoir besoin de remplacer les CSS.
3. Possibilité d'aligner le rendu du classement à gauche, au centre ou à droite du conteneur. Ceci est particulièrement utile lorsque vous utilisez le système de grille réactive et qu'un élément situé au-dessous ou au-dessus utilise plus de largeur que la colonne dans laquelle se trouve le composant d'évaluation. Voici un exemple où nous devons nous aligner à droite:
Composant d'étiquette dynamique personnalisée [19659016] Ce composant est disponible dans github ici La valeur de ce composant est d'afficher dynamiquement une étiquette à partir d'un élément de source de données sélectionné, par exemple, une description de destination lors de la sélection d'une destination dans une combo .
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:
Composant URL de l'image
Après avoir reçu vos commentaires, j'ai implémenté quatre propriétés pour faciliter l'alignement de l'image avec les autres composants de la vue. En quelques clics, vous pouvez ajuster rapidement:
- Marge left
- Margin right
- Margin top
- Margin left
Et surtout, vous pouvez voir l'effet de l'ajustement de ces propriétés sur le canevas du concepteur.
Le composant mis à jour est disponible dans github ici . 19659070]
Source link