Telerik UI pour Blazor vous permet d’adapter facilement votre application à vos spécifications de conception exactes et selon diverses approches. Apprenez-en davantage dans cet article.
Progrès Interface utilisateur Telerik pour Blazor est une bibliothèque complète de composants d’interface utilisateur natifs conçus pour créer des applications Blazor visuellement époustouflantes. En utilisant la puissance du dernier .NET 7/8 (encore en avant-première), vous pouvez accéder aux fonctionnalités uniques de Blazor. L’interface utilisateur Telerik pour Blazor est native de Blazor, garantissant une intégration transparente et des améliorations de performances par rapport aux composants enveloppés. De plus, ses composants prennent entièrement en charge Blazor Server et Blazor WebAssembly.
Sa large gamme de composants de haute qualité, depuis la grille, les graphiques et les formulaires jusqu’au planificateur et à l’éditeur, rend le développement plus rapide et plus simple. En conséquence, l’interface utilisateur peut vous aider à créer des applications qui répondent précisément à vos besoins.
L’une des fonctionnalités les plus remarquables de Telerik UI pour Blazor est sa capacité à réduire considérablement le temps de développement. Il est plus rapide car ses composants sont dotés des fonctionnalités dont vous avez besoin, telles que le tri, le filtrage et la pagination pour les grilles ou diverses vues de date et d’heure pour les planificateurs. En éliminant le besoin d’implémenter manuellement ces fonctionnalités, vous êtes libre de vous concentrer sur d’autres aspects critiques de votre application.
De plus, Progress Telerik fournit une documentation complète et une assistance avec une équipe d’assistance légendaire qui vous permet de garantir que vous disposez de toutes les informations dont vous avez besoin pour utiliser efficacement l’interface utilisateur.
Telerik UI pour Blazor n’est pas seulement une bibliothèque mais une solution complète à 360° pour le développement d’applications modernes, facilitant la création d’applications Blazor de haute qualité, évolutives et visuellement époustouflantes. Et grâce à ses nombreuses options de personnalisation, vous pourrez facilement personnaliser votre application exactement comme vous le souhaitez.
Niveaux de personnalisation dans l’interface utilisateur Telerik pour Blazor
Choisissez un thème prédéfini
Un avantage important de Telerik UI pour Blazor est sa prise en charge des normes de conception modernes. Il dispose de plusieurs éléments intégrés conçus par des professionnels thèmes: des ensembles prédéfinis de couleurs, de polices et de détails de style qui déterminent l’apparence générale d’une application.
Sélectionnez l’un de ces thèmes qui convient à votre application et appliquez-le dès la sortie de la boîte. Utilisez l’assistant pour commencer ou référencez le fichier CSS associé dans votre projet.
Les thèmes intégrés disponibles sont :
- Défaut: Un style neutre qui convient à la plupart des cas d’utilisation.
- Amorcer: Un thème qui correspond au style Bootstrap.
- Matériel: Met en œuvre les directives de conception matérielle.
- Courant: Basé sur l’interface utilisateur Microsoft Fluent.
Personnalisez votre thème
Vous recherchez une touche un peu plus personnelle ? Vous pouvez également personnaliser les thèmes en fonction de votre marque.
Dans ce cas, Progress fournit un Générateur de thèmes outil pour adapter les couleurs, les polices et autres éléments stylistiques du thème que vous avez choisi. Ajustez divers paramètres à votre guise, et voilà, vous pouvez télécharger un fichier CSS personnalisé intégré avec vos modifications uniques.
Personnaliser les composants
Plongez plus profondément dans la personnalisation en explorant la variété de paramètres offerts par chaque composant. Les composants individuels de Telerik UI pour Blazor peuvent être personnalisés de plusieurs manières. À un niveau basique, vous pouvez utiliser les différents paramètres fournis par chaque élément pour ajuster son comportement. Par exemple, définissez le Taille paramètre d’un composant Grid pour contrôler le nombre d’éléments affichés. Mais, encore une fois, la flexibilité vous appartient.
Personnaliser les classes CSS
Pour les personnalisations stylistiques, vous pouvez également appliquer vos propres classes CSS aux composants. Définissez simplement le paramètre Class d’un élément sur la classe CSS souhaitée.
Créer des modèles
Pour des personnalisations plus nuancées, Telerik UI for Blazor propose des paramètres de modèle. Ces paramètres vous permettent de contrôler complètement le rendu HTML d’un composant. Par exemple, le composant Grid fournit un paramètre RowTemplate pour définir le contenu des lignes personnalisées.
Configuration de thèmes à l’aide d’actifs statiques
Passons en revue la personnalisation d’un thème. Lorsque vous démarrez un nouveau projet avec Telerik Extension, vous pouvez sélectionner un thème prédéfini pour votre application comme mentionné précédemment :
Exemple de personnalisation
Dans le projet, le modèle a généré le code pour _Host.cshtml.
<link href="https://blazor.cdn.telerik.com/blazor/4.2.0/kendo-theme-fluent/swatches/fluent-main.css" rel="stylesheet" type="text/css" />
<script src="https://blazor.cdn.telerik.com/blazor/4.2.0/telerik-blazor.min.js" defer></script>
Sur une seule page, que vous pouvez voir en aperçu sur le site Telerik, vous pouvez sélectionner ces thèmes :
<!DOCTYPE html>
<html>
<head>
. . .
<link href="_content/Telerik.UI.for.Blazor/css/kendo-theme-default/all.css" rel="stylesheet" />
</head>
. . .
</html>
Les ressources statiques font partie du package NuGet et le framework les copiera automatiquement dans le dossier de sortie lors de la génération. Ils offrent les avantages suivants :
- Les ressources nécessaires au package sont toujours à votre disposition depuis le framework.
- L’application ne peut s’appuyer que sur des ressources locales et non sur des tiers (tels que les fournisseurs de CDN).
- Vous n’avez pas besoin de modifier leurs chemins après la mise à jour de la version du package (une exigence courante lors de l’utilisation de CDN).
Vous pouvez référencer les actifs Telerik intégrés tels que le fichier JS Interop et les feuilles de style de thème à partir d’un CDN cloud au lieu d’une ressource locale sur votre serveur. L’interface utilisateur Telerik pour Blazor CDN distribue les échantillons les plus standards pour chaque thème de base. Le CDN de thèmes supplémentaires distribue tous les échantillons disponibles pour les thèmes intégrés. Assurez-vous que la version dans les URL correspond aux performances de l’interface utilisateur Telerik pour le package Blazor. Si vous décidez d’utiliser un CDN sur des actifs statiques, vous devez mettre en œuvre une solution de secours au cas où le CDN ne serait pas disponible pour vos utilisateurs.
Les deux options sont faciles à mettre en œuvre. Vous faites simplement référence à des ressources locales ou distantes dans votre fichier HTML. Votre choix dépendra de vos besoins et préférences spécifiques.
Ne partez pas de rien
Partez d’un modèle ! Utilisons cet exemple de Telerik UI pour Blazor afin que vous puissiez apprendre comment les choses fonctionnent.
Utilisation de Progress ThemeBuilder
- Sélectionnez votre type de projet. Dans ce cas, c’est Blazor.
- Dans l’écran principal de ThemeBuilder, vous pouvez modifier les couleurs et les dispositions.
- Modifiez les couleurs de votre thème via la palette.
- Cliquez sur Exporter en haut de la page ThemeBuilder pour enregistrer le fichier zip. Décompressez le zip et ajoutez le fichier CSS à votre projet comme ceci :
<link href="./css/template-blozor23.css" rel="stylesheet" type="text/css" />
<script src="https://blazor.cdn.telerik.com/blazor/4.2.0/telerik-blazor.min.js" defer></script>
- Voici une comparaison rapide avant et après
Conclusion
Libérez tout le potentiel de Blazor avec Interface utilisateur Telerik pour Blazor. Cette suite complète de composants d’interface utilisateur natifs vous permet de créer sans effort des applications visuellement époustouflantes. Bénéficiez de nombreux éléments de haute qualité, des grilles et graphiques aux composants complexes du planificateur et de l’éditeur, tous conçus pour rationaliser votre flux de travail et réduire le temps de développement.
Diverses fonctionnalités et thèmes prêts à l’emploi vous permettent de vous concentrer sur l’innovation, et pas seulement sur la mise en œuvre. Adoptez les normes de conception modernes et rendez votre marque plus lumineuse grâce à des thèmes personnalisables.
La documentation complète et le support primé de Progress Telerik rendent votre parcours vers la création d’applications modernes fluide et sans souci. Telerik UI pour Blazor est vraiment la solution complète pour vos besoins de développement d’applications.
Avec Telerik UI pour Blazor, vous êtes le concepteur. Alors laissez libre cours à votre imagination et créez réellement votre application. Commencez votre voyage créatif avec Telerik aujourd’hui :Essayez-le gratuitement!
Les références
Source link