Quoi de neuf dans l'interface utilisateur Telerik pour Blazor avec R1 2022

L'interface utilisateur Telerik pour Blazor R1 2022 apporte plus de 90 composants natifs : Map, FileSelect, Dialog, Heatmap, QR Code, ColorPicker, REPL code runner, options de thème et plus encore !

Hé, les développeurs ! C'est l'heure de sortie de Telerik R1 2022 et nous sommes ravis de commencer 2022 avec l'introduction de plusieurs nouveaux composants d'interface utilisateur tels que Map, FileSelect et ColorPicker; plus de fonctionnalités Data Grid, TabStrip et Editor ; améliorations de thème et de style ; Coureur de code REPL ; Prise en charge de .NET 6 et Visual Studio 2022 ; Mises à jour de l'extension Visual Studio Code ; et plus! La suite de composants de l'interface utilisateur Telerik pour Blazor continue de s'étendre et a atteint une nouvelle étape de plus de 90 composants véritablement natifs ! contenu de la version expédié entre octobre 2021 et janvier 2022 (comprend l'interface utilisateur Telerik pour Blazor 2.28, 2.29, 2.30 et les versions 3.0.0 actuelles) : Gradient, Flat Color Picker, Dialog, File Select

Améliorations du thème : De nouveaux paramètres de thème dans les composants Button, DropDown, Input et DatePicker facilitent la création de langages de conception

Kits d'interface utilisateur Telerik & Kendo pour Figma v1.7

Améliorations de la grille de données : Personnalisations d'exportation Excel ; inclure toutes les pages dans l'exportation Excel avec OnRead, validation et édition améliorées ; Méthodes API pour dimensionner automatiquement les colonnes en fonction de leur largeur de contenu ; inclure les critères de filtre SearchBox dans l'état et la possibilité de les effacer via l'icône X et la touche Échap

Nouvelles améliorations de la liste arborescente : Validation et édition améliorées, méthodes API pour dimensionner automatiquement les colonnes en fonction de leur largeur de contenu, inclure les critères de filtre SearchBox dans l'état et possibilité de l'effacer via l'icône X et la touche Échap, inclure toutes les pages dans l'exportation Excel avec OnRead

Améliorations du graphique : Couleur et opacité de l'arrière-plan de la zone, largeur de ligne et type de tiret

Améliorations de la bande d'onglets : Paramètres Visible & PersistTabContent

Améliorations de téléchargement : Méthodes de gestion des fichiers sélectionnés et téléchargés

Tous les composants d'entrée : Paramètre ValidateOn (valider en cas de modification, de flou ou lors de la saisie)

Sélecteur de date amélioration : Espaces réservés

Tous les composants sélectionnés : Présentation des paramètres contextuels

Ajouter un média au composant de l'éditeur

Le code source du produit est désormais disponible pour les titulaires de licence actifs

Prise en charge de .NET 6 et Visual Studio 2022

Nouveau Telerik REPL pour Blazor playground

Améliorations des bibliothèques de traitement de documents : Prise en charge de la mise en forme conditionnelle et des notes d'exportation avec un auteur dans SpreadProcessing; MailMerge imbriqué dans WordsProcessing

Améliorations des extensions Visual Studio et Visual Studio Code : Extension Visual Studio Code remaniée, avec sélection de thèmes et d'échantillons et nouveau modèle de tableau de bord d'administration dans les extensions Visual Studio et Visual Studio Code

Plongez dans Version 3.0.0 de l'interface utilisateur pour Blazor

Examinons de plus près le contenu actuel de la version 3.0.0, puis passons en revue les nouveaux composants et fonctionnalités de l'interface utilisateur Telerik pour les versions Blazor 2.30, 2.29 et 2.28 expédiées en octobre, novembre et décembre. 2021 dans le cadre de la version R1 2022.

Nouveau composant d'interface utilisateur Blazor Map

Aperçu

Nous sommes heureux d'annoncer la première version du Telerik UI for Blazor Map component ! La carte vous permet d'afficher des informations géographiques organisées en couches et peut être intégrée à des fournisseurs de cartes ouvertes dans vos applications Blazor. Le composant comprend des couches de tuiles, de bulles, de formes et de marqueurs, ainsi que la prise en charge du format de données GeoJSON. Il est compatible avec un large éventail de fournisseurs de cartes de tuiles, vous permettant d'intégrer facilement des fonctionnalités avancées de localisation et de mobilité dans vos cartes, une prise en charge tactile, plusieurs options de personnalisation et plus encore ! for Blazor Map Component" style="vertical-align: middle;"/>

Couches de carte

Selon les différents fournisseurs de cartes et cas d'utilisation, vous pouvez tirer parti des couches suivantes :

• Tile – Rend les éléments et peut être lié aux fournisseurs OpenStreetMap et Azure Maps
• Bubble – Une couche vectorielle qui affiche des bulles sur une autre couche pour marquer les régions
• Shape – Liaison aux Données GeoJSON
• Marqueur – Utilisé pour afficher des marqueurs sur la carte et une info-bulle lorsque le marqueur est survolé.

Voir les démos de la mise en œuvre de la couche de bulles du composant Carte.

OnMarkerClick, OnShapeClick et OnClick.

Nouveau composant d'interface utilisateur Blazor FileSelect

Présentation

Le UI pour le composant Blazor FileSelect permet aux utilisateurs de sélectionner un ou plusieurs fichiers dans leurs systèmes de fichiers locaux et de les stocker sur un serveur. Le composant est particulièrement pratique lorsque vous souhaitez un contrôle complet sur la gestion des fichiers sélectionnés et la manière dont ils sont téléchargés. Il dispose d'une prise en charge et d'une accessibilité intégrées de la navigation au clavier, tout comme le reste des composants de l'interface utilisateur Blazor du portefeuille Telerik. align: middle;"/>

Désactivation de FileSelect

Dans les cas où vous devez empêcher les utilisateurs de sélectionner des fichiers, FileSelect peut être désactivé avec une seule option de configuration.

Voir la démo de validation du composant Blazor FileSelect.

File Select expose les événements OnSelect et OnRemovedonnant un contrôle par programmation sur les fichiers sélectionnés et supprimés :

• OnSelect – déclenché lorsqu'un ou plusieurs fichiers ont été sélectionnés via le bouton Sélectionner les fichiers
• OnRemove – déclenché lorsqu'un fichier a été supprimé de la liste des fichiers sélectionnés (en cliquant sur l'icône X ou en appuyant sur la touche Suppr)

Améliorations du thème

En fonction de vos commentaires liés aux personnalisations de thèmes et aux tendances du langage de conception, nous allons aborder divers aspects de nos thèmes dans un effort continu pour rendre les thèmes de l'interface utilisateur de Kendo plus flexibles, extensibles et personnalisables pour aider nos utilisateurs à couvrir davantage d'exigences en matière de conception et d'expérience utilisateur. (Remarque : l'ensemble de thèmes communs de Kendo UI peut être partagé entre tous les produits Telerik et Kendo UI : UI pour Blazor, ASP.NET Core et MVC, ainsi que Kendo UI pour jQuery, React, Vue et Angular).

Nous ont revisité tous les composants de l'interface utilisateur Telerik à travers les thèmes par défaut, Bootstrap et Material et ont introduit des options communes qui peuvent être définies au niveau des composants qui peuvent aider à définir les couleurs du thème principal, la taille et la forme des composants individuels, et plus encore.

Avec R1 2022, nous avons mis à jour les catégories de composants Button, Input, DateInput et DropDown pour offrir les options de rendu de thème suivantes :

• ThemeColor
• Size
• Shape[19659006]Arrondi
• FillMode

un article de blog sur l'avenir des thèmes dans Telerik et Kendo UI.

Telerik & Kendo UI Kits for Figma v1.7

Nous avons officiellement présenté les Kits d'interface utilisateur Telerik et Kendo pour Figma il y a quelques mois dans le but d'aider à améliorer la collaboration entre les concepteurs et les développeurs utilisant les composants d'interface utilisateur Telerik et Kendo. Nous avons élargi l'ensemble initial de composants d'interface utilisateur, et je suis heureux de partager qu'avec R1 2022, nous avons introduit des actifs Figma pour tous les composants d'interface utilisateur Telerik et Kendo à une seule exception : les graphiques.

Découvrez comment insérer une vidéo dans le composant Telerik Blazor Editor.

déclencher le téléchargement, la boîte de dialogue de sélection de fichier et le possibilité d'effacer les fichiers téléchargés avec succès.

Traitement de documents Telerik dans les applications Blazor ! Dans le dernier package de distribution, vous trouverez plusieurs des éléments les plus recherchés de notre portail de commentaires, tels que :

• Mise en forme conditionnelle pour le traitement de propagation : Permet d'ajouter des règles utilisées lors de la visualisation des cellules et applique une mise en forme en fonction de leurs valeurs.
• Notes pour RadSpreadProcessing : L'utilisateur pourra ajouter et exporter des notes avec un auteur spécifique.
• Imbrication MailMerge for WordsProcessing : Chaque champ de fusion peut contenir une liste d'éléments qui doivent être affichés dans le document fusionné.

Changements de rupture dans la version 3.0.0

Alors que nous visons à garantir des versions sans perturbation pendant plus de deux ans, à mesure que le produit et le cadre évoluaient, nous avons introduit plusieurs changements de rupture dans la version 3.0.0 actuelle garantissant des améliorations dans l'API, le rendu et la thématisation et certains liés à l'unification de la dénomination des paramètres. dans la version 3.0.0 et en ajoutant du temps pour les traiter dans le cadre de tout processus de mise à jour que vous avez peut-être prévu. goodies de la version Telerik UI pour Blazor 3.0.0, passons en revue le reste des éléments qui font partie de R1 2022 et ont été expédiés plus tôt. ] a été lancé en octobre et représente un environnement en ligne interactif qui lit, compile et exécute immédiatement votre code Blazor dans le navigateur. L'environnement prêt à l'emploi ne nécessite aucune installation, compte ou outil spécial – il suffit de se lancer et de commencer à coder. Les fonctionnalités supplémentaires incluent :

• Enregistrement de vos extraits de code Blazor
• Partage d'exemples avec une URL simple
• Intégration dans des articles de blog ou des articles avec un iframe interactif
• Partage depuis votre IDE à l'aide de notre Visual Extension Studio et Extension Visual Studio Code
• Installation de vos packages NuGet préférés
• Référence aux fichiers statiques
• Accès transparent à l'interface utilisateur Telerik pour Blazor avec plus de personnaliser les composants de l'interface utilisateur

Telerik REPL pour Blazor s'intègre toujours à la dernière version de l'interface utilisateur Telerik pour Blazor, de sorte que tout extrait créé avant la version 3.0.0 actuelle qui utilise les composants Telerik peut nécessiter une mise à jour en raison des changements de rupture dans the release.

T autonome Composant d'interface utilisateur elerik Blazor Dialog afin que vous disposiez d'une solution prête à l'emploi pour créer des fenêtres contextuelles d'interface utilisateur. Le composant est pratique pour afficher des informations aux utilisateurs et fournit plusieurs options de personnalisation telles que la largeur, la hauteur, le titre, la visibilité, les modèles de bouton de contenu et d'action, la fermeture en cas de clic en superposition, etc.

Heatmap Chart UI Le composant  vous permet de visualiser des données bidimensionnelles dans une multitude de couleurs. Certaines des fonctionnalités du nouveau composant Heatmap incluent : la visualisation des valeurs de données sous différentes formes ; diverses échelles de couleurs ; des info-bulles qui vous permettent d'afficher des informations supplémentaires ; la construction -in et thèmes et échantillons personnalisés.

Telerik UI for Blazor QR Code component  est une étiquette lisible par machine qui contient des données pour un localisateur, un identifiant ou un tracker, dirigeant les utilisateurs vers un site Web ou une application lorsqu'ils sont scannés avec n'importe quel appareil intelligent. Vous pouvez encoder plusieurs formats de données tels que les URL, les numéros de téléphone, les adresses e-mail, les informations de contact et les géolocalisations. Le QR Code peut être personnalisé de différentes manières : en y affichant vos propres logos et images personnalisés, en configurant sa taille, sa largeur, son rembourrage, ses bordures, ses niveaux de correction d'erreur, ses couleurs et les paramètres de superposition du QR Code. Le composant prend également en charge la génération de code QR suisse.

ColorPalettenous avons introduit trois nouvelles variantes garantissant une référence simplifiée pour différents scénarios. Vous pouvez brancher le composant ColorGradient au cas où vous auriez besoin d'afficher uniquement un vue dégradée, et pour des scénarios plus avancés, vous pouvez utiliser le FlatColorPicker ou le ColorPicker avec une fenêtre contextuelle.

l'entrée de la zone de recherche et les critères de filtre peuvent désormais être facilement effacés en utilisant l'icône X dans la zone, la touche Échap ou par programmation

Déclencher OnEdit, OnUpdate, OnCancel sur chaque cellule dans Incell EditMode – vous pouvez décidez vous-même si vous souhaitez mettre à jour le modèle de manière conditionnelle ou pour chaque champ

Options d'exportation de la grille vers Excel – définissez les éléments de données ou les colonnes à inclure dans le fichier exporté (via l'événement OnBeforeExcelExport), contrôlez la largeur des colonnes exportées, ont une prise en charge transparente pour l'exportation des valeurs d'énumération et déclenchent l'exportation Excel et CSV par programme descriptions des parties de format pour plusieurs composants DateInputs. Les espaces réservés de format sont pris en charge pour DateTimePickerDatePickerTimePickerDateRangePicker et DateInputDateInputDateInput

PersistTabContent

qui détermine si le contenu des onglets est conservé lors du changement d'onglet, et Visiblequi vous permet de contrôler facilement la visibilité de chacun des onglets .

Date & Time Pickers TextBox Numeric TextBox MaskedTextBox  et Zone de texte[1945901sept]. Le paramètre ValidateOn vous permet de configurer s'il faut déclencher la validation en cas de changement, de flou ou lors de la saisie. ;"/>

Nouvelles fonctionnalités dans les graphiques

Nous avons exposé plusieurs propriétés de graphique demandées via le portail de commentaires dédiéqui vous permettront de personnaliser facilement la couleur et l'opacité de l'arrière-plan de la zone, la largeur de ligne et type de tiret .

Créer de nouveaux assistants de projet pour Visual Studio et Code Visual Studio offrent désormais l'option de configuration du thème et des nuances, ainsi qu'un tout nouveau modèle de projet de tableau de bord d'administration. Vous pouvez désormais styliser votre projet au moment de sa création et configurer à la fois le thème et les nuances spécifiques de l'assistant en un clic.À l'aide du modèle de projet du tableau de bord d'administration, vous pouvez facilement démarrer un projet Blazor avec la mise en page et les fonctionnalités prédéfinies – réorganiser la mise en page en fonction de vos besoins, et simplement branchez vos données et liez-les au c Composants, y compris la grille, la disposition des tuiles, le tiroir, le calendrier, le formulaire, divers types de graphiques, la carte et plus encore. ="vertical-align: middle;"/>

Téléchargez l'interface utilisateur Telerik pour Blazor 3.0.0

Accédez à la page Interface utilisateur Telerik pour Blazor et téléchargez un essai gratuit de l'interface utilisateur Telerik pour Blazor 3.0.0. Ou, si vous êtes titulaire d'une licence active, vous pouvez récupérer les dernières et les meilleures sur la page "Votre compte", ou mettre à jour votre référence de package NuGet Telerik.UI.for.Blazor vers la version 3.0.0. Assurez-vous d'examiner et d'évaluer les changements de rupture annoncés avant de mettre à jour vers la dernière version de vos solutions Blazor. assurez-vous de vous inscrire au webinaire sur la version Telerik R1 2022 et aux sessions Twitch en direct pour voir les composants et les fonctionnalités nouvellement publiés en action :

Sessions Twitch :
Lun 24 janvier I 10 :00 am ET – midi I Desktop & Mobile
Mar 25 janvier I 10h00 ET – midi I Web .NET

Webinaire :
Mer 2 février I 11h00 – 13h00 HE

Réservez votre place pour le webinaire

Merci pour votre soutien continu !