Utilisation de cartes d'interface utilisateur Kendo sur un tableau de bord angulaire

Pour montrer l'un de nos nouveaux composants de carte Kendo UI pour Angular d'une manière peu conventionnelle, j'ai créé InterGalactica,
un tableau de bord interne à l'usage des employés. Ce tableau de bord permettra aux employés d'accéder à l'entreprise
emplacements employés et produits .

Lors de la création du projet Angular, j'ai utilisé cette commande avec ces divers indicateurs pour générer l'application:


ng new kui-enterprise-demo --skipTests = true --style = scss --viewEncapsulation = None --routing = true


Dans cette procédure pas à pas, je n'utilise pas de tests, j'ai donc ignoré la création de ces fichiers. J'ai utilisé le
indicateur de style pour générer des fichiers scss pour mon projet. J'ai également défini viewEncapsulation sur aucun, je
comme les styles en cascade et ne ressentent pas le besoin de conserver les styles de composants encapsulés. Je mets aussi
routage vers true, nous allons donc commencer avec un fichier de routes!

Découvrez le projet terminé ici sur Github: https://github.com/alyssamichelle/intergalactica

Remarque : J'ai utilisé le API Lorem Picsum pour les images et le SWAPI pour le contenu de ce projet! 1965

Afin d'obtenir notre nouveau projet sur les dernières versions de CLI et Angular, j'ai ensuite utilisé cette commande de mise à jour:

ng update @ angular / cli @ angular / core

J'ai ensuite créé un composant de tableau de bord avec la commande ng generate et j'ai commencé à me moquer
«Composants de carte» avec des itinéraires:

Nous sommes enfin prêts à basculer avec le composant de carte d'interface utilisateur Kendo !! Sur chacun de nos composants, vous pouvez trouver un
ng add pour ajouter facilement ce composant et ses composants de famille à votre application. Si vous
utilisez CLI version 6 ou antérieure, vous devrez effectuer l'installation manuelle. Cela peut être utile pour
cependant, des applications à jour. Si vous êtes soucieux de la performance et souhaitez inclure uniquement les composants de votre
l'application utilisera, alors les instructions d'installation manuelle sont pour vous! Consultez à la fois l'installation rapide et le manuel
installez les instructions pour le composant Carte ici sous la famille de composants de disposition .

npm install --save @ progress / kendo-angular-layout @ progress / kendo-angular-l10n @ progress / kendo-angular-common

Maintenant, nous pouvons remplacer les cartes factices pour la vraie affaire. Voici une ventilation de l'anatomie de notre composant de carte!

Donc, pour chacun de nos trois "portails", j'ai créé une carte en utilisant ces pièces.

J'ai également créé ces styles par défaut dans styles.scss :

 body {
famille de polices: "Roboto", Helvetica, Arial, sans-serif;
taille de police: 14px;
couleur: rgb (70, 70, 70);
marge: 0;
}
h1 {
poids de la police: 100;
}
une {
couleur: rgb (70, 70, 70);
décoration de texte: aucune;
}

Nous devons un peu personnaliser les cartes. Nous voulons que chacun d'eux soit visible et cliquable. C'est donc là que la goutte
l'ombre est utile! Nous devons d’abord envelopper chacun de nos composants de carte dans une étiquette d’ancrage avec
routerLink s.

Pour faire savoir à nos utilisateurs que les cartes sont cliquables, j'ai ajouté une ombre portée par défaut à toutes les cartes (que l'on peut voir
dans la capture d'écran ci-dessus). En vol stationnaire, j'ai assombri l'ombre portée. Voici les styles personnalisés supplémentaires que j'ai ajoutés:

 @import 'src / variables';
// cela aligne bien nos cartes d'affilée
:hôte {
affichage: flex;
justifier-contenu: espace-également;
}
.k-card {
transition: box-shadow .4s facilité;
box-shadow: $ box-shadow;
}
a: survolez .k-card {
transition: box-shadow .4s facilité;
box-shadow: $ box-shadow-darker;
}

La feuille de style des variables que j'importe consiste en quelques variables que je pensais utiliser encore et encore, donc je
les a déplacés dans un fichier réutilisable distinct:

 $ professional-grey: # f5f6f7;
$ gris foncé: # 4d4f52;
$ remplissage de page: 40px;
$ shadow-box: 0 7px 27px -5px hsla (240, 30,1%, 28%, 0,25), 0 4px 16px -8px hsla (0, 0%, 0%, 0,3), 0 -6px 8px -6px hsla (0 , 0%, 0%, 0,03);
$ box-shadow-darker: 0 13px 27px -5px hsla (240, 30,1%, 28%, 0,25), 0 8px 16px -8px hsla (0, 0%, 0%, 0,3), 0 -6px 16px -6px hsla (0, 0%, 0%, 0,03);

Nous avons donc nos ombres de boîte indiquant la cliquabilité et nous avons nos ancres avec nos routerLinks, donc nous allons réellement
allez sur le bon itinéraire en cliquant. Cependant, il y a un dernier détail qui me dérange. Vous pouvez voir au
au début de la vidéo, les cartes "pop" une fois le contenu puis l'image chargée. Pour prendre soin de cela
problème de popping, nous devons simplement définir une hauteur minimale sur nos .k-card s et les .k-card img s.

 @import 'src / variables';
:hôte {
affichage: flex;
justifier-contenu: espace-également;
}
.k-card {
transition: box-shadow .4s facilité;
box-shadow: $ box-shadow;
// les 2 lignes suivantes sont destinées à éviter le problème de "popping in"
hauteur min: 382px;
img {
hauteur min: 200px;
}
}
a: survolez .k-card {
transition: box-shadow .4s facilité;
box-shadow: $ box-shadow-darker;
}

Note : N'oubliez pas d'ajouter la transition à l'état normal de .k-card ainsi que le
: survolez !

Facile-peasy-lemon-squeezy! Ensuite, construisons ces routes pour que le routerLink fonctionne!

À l'intérieur de notre app-routing.module.ts j'ai défini tout trois des routes du portail ainsi que la route par défaut
pour que notre trappe d'échappement soit utilisée.

 import {NgModule} de '@ angular / core';
importer {Routes, RouterModule} depuis '@ angular / router';
importer {DashboardComponent} depuis './dashboard/dashboard.component';
importez {EmployeesComponent} depuis './employees/employees.component';
importer {LocationsComponent} depuis './locations/locations.component';
importer {ProductsComponent} depuis './products/products.component';
const routes: Routes = [
{ path: '', component: DashboardComponent },
{ path: 'employees', component: EmployeesComponent },
{ path: 'locations', component: LocationsComponent },
{ path: 'products', component: ProductsComponent },
];
@NgModule ({
importations: [RouterModule.forRoot(routes)],
exportations: [RouterModule]
})
classe d'exportation AppRoutingModule {}

J'ai été très impressionné par la facilité avec laquelle il était possible de commencer à utiliser le composant de carte et de le personnaliser.
Découvrez le reste des caractéristiques du composant de carte ici et comme
toujours, heureux de coder tout le monde!