Fermer

janvier 21, 2021

Nouveautés de l'interface utilisateur Telerik pour ASP.NET MVC R1 2021


La nouvelle 2021 entre en jeu avec la sortie massive de Telerik R1 pour l'année! Nous sommes heureux d'annoncer sur quoi nous avons travaillé et de partager avec vous les dernières et meilleures de l'interface utilisateur Telerik pour ASP.NET MVC. Découvrez tous les nouveaux composants, améliorations et fonctionnalités que nous avons ajoutés à l’ensemble de l’interface utilisateur pour améliorer davantage vos applications MVC!

Avec la version Telerik R1 2021, vous pouvez profiter de cinq nouveaux composants que nous introduisons dans notre interface utilisateur pour ASP.NET MVC, à savoir: Floating Action Button Bottom Navigation Expansion Panel Checkbox Group and Radio Group . Nous avons également amélioré le Telerik Grid et ajouté de nouvelles fonctionnalités à Editor TileLayout et ListView . Lisez jusqu'au bout pour en savoir plus sur tout ce qui est nouveau dans l'interface utilisateur Telerik pour ASP.NET MVC!

Nouvelle interface utilisateur pour ASP.NET Composant du bouton d'action flottant MVC

Présentation du bouton d'action flottant

L'ASP Le bouton d'action flottante .NET MVC (FAB) est positionné au-dessus du contenu de l'écran et affiche une action principale contextuelle que l'utilisateur peut effectuer. Vous avez un accès facile à l'action la plus logique qui correspond au contenu de votre application ou à l'interface utilisateur de la page en cours. Le composant FAB est facilement personnalisable en termes d'apparence, de position et d'autres paramètres de configuration, et il est livré avec une accessibilité intégrée, une navigation au clavier et une prise en charge de droite à gauche.  Telerik UI pour ASP.NET MVC Floating Action Button Component "title =" Interface utilisateur Telerik pour composant de bouton d'action flottant ASP.NET MVC "style =" text-align: center; vertical-align: middle; "/></p data-recalc-dims=

Interface utilisateur Telerik pour ASP.NET Composant du bouton d'action flottant MVC

Options de personnalisation du bouton d'action flottant

Le composant fournit un grand nombre d'options de configuration qui vous permettent d'intégrer et de modifier le composant FAB selon vos préférences personnelles et les exigences de l'application:

  • Alignment – Vous pouvez ajuster la position du bouton d'action flottant en utilisant les paramètres de configuration Align, AlignOffset et PositionMode qui spécifient respectivement comment le FAB est aligné par rapport à son conteneur, le décalage horizontal et vertical et sa position CSS dans le document
  • Apparence – Vous avez un contrôle total sur l'apparence du composant en spécifiant sa taille, sa forme, sa couleur, son texte, ainsi que les paramètres de l'icône [19659012] Interface utilisateur Telerik pour ASP.NET MVC Formes de bouton d'action flottante "title =" Interface utilisateur Telerik pour ASP.NET MVC Formes de bouton d'action flottante "style =" vertical-align: middle; "/>

    Telerik U I pour ASP.NET MVC Personnalisation du bouton d'action flottante

    Modèles de bouton d'action flottante

    En plus d'utiliser le composant comme un bouton unique avec une seule action, vous pouvez également choisir de rendre d'autres actions associées ou de numérotation rapide Actions. Vous pouvez le faire en utilisant les Modèles de boutons d'action flottants et en configurant les éléments d'action de numérotation abrégée à l'intérieur du bouton.

    Accessibilité, navigation au clavier et prise en charge RTL

    Le bouton d'action flottante ASP.NET MVC est conçu pour être accessible à tous les utilisateurs et fournit le support WAI-ARIA, Section 508, WCAG 2.1. De plus, il peut être entièrement utilisé à l'aide du clavier uniquement grâce à la navigation par clavier disponible . Le composant fournit également le support RTL pour les utilisateurs qui communiquent dans des langues de droite à gauche.

     Interface utilisateur Telerik pour ASP.NET Bouton d'action flottant MVC Prise en charge RTL "title =" Interface utilisateur Telerik pour prise en charge RTL du bouton d'action flottante ASP.NET MVC "style =" vertical-align: middle; "/></p data-recalc-dims=

    Interface utilisateur Telerik pour ASP.NET MVC Bouton d'action flottant Prise en charge RTL

    Nouvelle interface utilisateur pour le composant de navigation inférieur ASP.NET MVC

    Présentation de la navigation inférieure

    Nous introduisons un autre composant de navigation dans notre interface utilisateur Telerik pour ASP. NET MVC qui est la Navigation inférieure . Son objectif est de changer de vue et de vous faire naviguer entre les destinations principales d'une application en un clic. Vous avez un contrôle total sur l'apparence du composant, ses éléments et texte facultatif, ainsi que la navigation au clavier, l'accessibilité et la prise en charge RTL disponibles.

     Interface utilisateur Telerik pour ASP.NET MVC Bottom Navigation Component "title =" Telerik UI pour ASP.NET MVC Bottom Navigation Component "style =" vertical-align: middle; "/><p align= Interface utilisateur Telerik pour ASP.NET MVC Bottom Composant de navigation

    Options de personnalisation de la navigation par le bas

    Le composant de navigation par le bas est livré avec différentes options de configuration pour personnaliser entièrement son apparence:

    • Items – Configurez les éléments du composant de navigation du bas en définissant attributs spécifiques. En fonction de votre application et de ses exigences, vous pouvez choisir les icônes à ajouter aux éléments et inclure une étiquette de texte si nécessaire. Vous pouvez également définir l'état activé et sélectionné des éléments.
    • Apparence – Ajustez l'apparence générale du composant en utilisant le flux d'éléments, la couleur du thème, la bordure, l'ombre et les paramètres de remplissage et plus encore!

     Interface utilisateur Telerik pour ASP.NET MVC Personnalisation de la navigation inférieure "title =" Interface utilisateur Telerik pour ASP.NET MVC Personnalisation de la navigation inférieure "style =" vertical-align: middle; "/></p data-recalc-dims=

    Interface utilisateur Telerik pour ASP. Apparence de navigation inférieure de NET MVC

    Modèles de navigation inférieure

    Pour une apparence plus personnalisée, la navigation inférieure fournit des modèles d'options qui vous permettent d'inclure des éléments personnalisés ou d'autres interfaces utilisateur Telerik pour ASP.NET Contrôles MVC.

     Interface utilisateur Telerik pour les modèles de navigation inférieure ASP.NET MVC "title =" Interface utilisateur Telerik pour modèles de navigation inférieure ASP.NET MVC "style =" vertical-align: middle; "/></p data-recalc-dims=

    Interface utilisateur Telerik pour les modèles de navigation inférieure ASP.NET MVC

    Nouvelle interface utilisateur pour ASP. Composant du panneau d'extension NET MVC

    Présentation et propriétés du panneau d'extension

    Le panneau d'extension est un composant pliable que l'utilisateur peut développer pour révéler sa zone de contenu. Il fournit plusieurs options de configuration qui vous permettent de:

    • Configurer son état par défaut en définissant sa Propriété étendue sur vrai ou faux
    • Désactiver ou activer l'expansion via la propriété Disabled [19659039] Définissez sa propriété Toggleable sur false ou true pour empêcher ou autoriser l'expansion et la réduction
    • Configurez l'état d'animation en définissant sur true ou false la propriété Animation

     Telerik UI pour ASP. NET MVC Expansion Panel Component "title =" Telerik UI pour ASP.NET MVC Expansion Panel Component "style =" vertical-align: middle; "/><p align= Telerik UI pour ASP.NET MVC Expansion Panel Component [19659008] Navigation au clavier et prise en charge RTL

    Le composant est également livré avec Navigation au clavier intégrée qui vous permet de travailler avec et de basculer le contenu en utilisant uniquement votre clavier. Il fournit également le rendu RTL pour les utilisateurs qui communiquent via langues de droite à gauche.

    Nouvelle interface utilisateur pour ASP.NET MVC CheckBox Group Component

    CheckBoxGroup Overview

    Ce nouveau composant fournit une fonctionnalité de case à cocher pour répertorier les éléments. Le CheckBoxGroup est livré avec plusieurs options de configuration pour la liaison de données, les étiquettes et la personnalisation de la mise en page.

     Telerik UI pour ASP.NET MVC CheckBoxGroup Component "title =" Telerik UI pour ASP.NET MVC CheckBoxGroup Component "style = "vertical-align: middle;" /><p align= Interface utilisateur Telerik pour ASP.NET MVC CheckBoxGroup Component

    CheckBoxGroup Data Binding

    Pour Data Binding vous pouvez utiliser l'une des deux méthodes — Eléments () pour lier les éléments checboxgroup au composant, ou BindTo () pour le lier à un modèle de données.

    Personnalisation de CheckBoxGroup

    Vous pouvez personnaliser les textes des libellés et le positionnement des libellés – avant ou après la case à cocher – en fonction de votre Choisissez également l'orientation horizontale ou verticale pour la mise en page CheckBoxGroup .

     Interface utilisateur Telerik pour ASP.NET MVC CheckBoxGroup Personnalisations "title =" Interface utilisateur Telerik pour ASP.NET MVC CheckBoxGroup Personnalisations "style =" vertical -aligne: milieu; "/><p align= Tél erik UI pour ASP.NET MVC CheckBoxGroup Personnalisation

    Nouvelle interface utilisateur pour ASP.NET MVC Radio Group Component

    RadioGroup Overview

    Le RadioGroup component définit une liste de boutons radio. Contrairement au CheckBoxGroup, les utilisateurs ne peuvent sélectionner qu'un seul élément parmi les options fournies.

     Interface utilisateur Telerik pour ASP.NET MVC RadioGroup Component "title =" Telerik UI pour ASP.NET MVC RadioGroup Component "style =" vertical-align: middle; "/></p data-recalc-dims=

    Telerik UI pour ASP.NET MVC RadioGroup Component

    Semblable à CheckBoxGroup, le composant RadioGroup fournit également Data Binding via l'une des deux méthodes: Items () ou BindTo ().

    RadioGroup Customization

    Avec ce composant, vous pouvez sélectionnez également une disposition verticale ou horizontale, définissez des textes d'étiquettes personnalisées et choisissez le positionnement des étiquettes – avant ou après le bouton radio. Pour en savoir plus, consultez la documentation officielle .

     Telerik UI for ASP.NET MVC RadioGroup Customizations " title = "Interface utilisateur Telerik pour ASP.NET MVC RadioGroup Personnalisations" style = "vertical-align: middle;" /><p align= Interface utilisateur Telerik pour ASP.NET MVC RadioGroup Personnalisation

    Navigation au clavier et prise en charge RTL

    Les deux CheckBoxGroup et les composants RadioGroup sont livrés avec un support RTL intégré pour ceux qui les langues de droite à gauche et la navigation au clavier qui permet l'utilisation et la sélection d'éléments sans utiliser votre souris.

    Nouvelle interface utilisateur pour ASP.NET MVC Grid Features

    En plus de tous les nouveaux composants fournis avec la version Telerik R1 2021, nous introduisons également de nouvelles fonctionnalités et des améliorations à nos composants existants. Voici comment nous avons amélioré la Telerik Grid :

    • Propriété exportable pour les colonnes de la grille – Nous avons ajouté une propriété exportable à la grille ASP.NET MVC qui vous permet de configurer les colonnes à inclure ou non dans le fichier exporté de la Grille. Vous pouvez également choisir une colonne exportable vers un format de fichier mais pas vers un autre.
    • Organiser les éléments dans le menu de colonne de grille – Nous ajoutons des options pour trier et regrouper les éléments dans un menu de colonne pour une meilleure expérience utilisateur. Il existe également une nouvelle option de style qui peut être appliquée au menu de la colonne Grille. L'utilisateur peut choisir le look «classique» par défaut ou sélectionner le nouveau mode de rendu «moderne».

     Interface utilisateur Telerik pour ASP.NET MVC Grid Conception du menu de colonne mise à jour "title =" Interface utilisateur Telerik pour ASP.NET MVC Grid Conception du menu colonne mise à jour "style =" vertical-align: middle; "/><p align= Interface utilisateur Telerik pour ASP.NET MVC Grid Column Menu Modern Rendering

    Nouvelle interface utilisateur pour ASP.NET MVC Editor Features

    List with Roman Numbers in Editor

    Le composant Editor est encore amélioré avec la possibilité d'ajouter une liste d'éléments non ordonnés à puces, ainsi que des listes numérotées avec des chiffres romains ou arabes. Vous pouvez trouver des exemples de cette fonctionnalité dans notre Démonstration de tous les outils de l'éditeur .

     Telerik UI pour ASP.NET MVC Editor Créer une liste avec des chiffres romains " title = "Telerik UI pour ASP.NET MVC Editor Créer une liste avec des chiffres romains" style = "vertical-align: middle;" /><p align= Telerik UI pour ASP.NET MVC Editor Liste avec des chiffres romains [19659008] Outil d'alignement de table dans l'éditeur

    L'éditeur ASP.NET MVC propose désormais un outil d'alignement avec lequel les utilisateurs peuvent ajuster l'alignement du contenu dans les tableaux à gauche, à droite ou au centre avec un clic sur un bouton. Découvrez le fonctionnement de cette fonctionnalité dans la démo de Editor All Tools en sélectionnant le tableau et en choisissant l'option d'alignement souhaitée dans la barre d'outils.

     Telerik UI pour ASP.NET MVC Editor Outil d'alignement de table "title =" Outil d'alignement de table Telerik UI pour ASP.NET MVC Editor "style =" vertical-align: middle; "/><p align= Telerik UI pour ASP.NET MVC Editor Outil d'alignement de table

    Nouvelle interface utilisateur pour ASP.NET Fonctionnalités MVC TileLayout

    Avec la R1 2021, nous implémentons une nouvelle fonctionnalité Ajouter ou supprimer des éléments au composant TileLayout. Vous pourrez faire glisser et déposer des éléments de la barre latérale vers la zone de type tableau de bord et supprimez-les en utilisant un bouton de fermeture visible sur chaque vignette. Cela vous permettra de personnaliser entièrement le contenu du composant et de décider de ce qui est le plus pertinent à présenter.

     Interface utilisateur Telerik pour ASP.NET MVC TileLayout Ajouter et supprimer des éléments "title =" Interface utilisateur Telerik pour ASP.NET MVC TileLayout Ajouter et supprimer des éléments "style =" vertical-align: middle; "/><p align= Interface utilisateur Telerik pour ASP.NET MVC TileLayout Ajout et suppression d'éléments

    Nouvelle interface utilisateur pour ASP.NET MVC ListView Fonctionnalités

    Le composant ASP.NET MVC ListView est désormais amélioré avec une nouvelle option de regroupement. Cela vous permet d'afficher les données de manière plus organisée et structurée dans ListView. Vous pouvez y parvenir avec la capacité de regroupement DataSource. Pour en savoir plus sur la fonction de regroupement, consultez notre article de documentation .

     Telerik UI pour ASP.NET MVC ListView Grouping "title = "Telerik UI pour ASP.NET MVC ListView Grouping" style = "vertical-align: middle;" /><p align= Telerik UI pour ASP.NET MVC ListView Grouping

    Accessibilité et navigation au clavier

    Nous continuons également pour améliorer nos composants en termes d'accessibilité et de navigation au clavier et dans la Telerik R1 2021 r Nous avons ajouté la prise en charge de WAI-ARIA, Section 508 et WCAG 2.1 et la navigation par clavier intégrée pour ScrollView Drawer Timeline et TileLayout .

    Mise en évidence des améliorations des cartes de zone

    Les cartes de zone sont maintenant encore améliorées avec une option de surbrillance au survol. Lorsque l'utilisateur survole la série de graphiques souhaitée, le reste des zones devient transparent, donnant une indication visuelle et un projecteur sur la zone qui l'intéresse.

    New WordsProcessing Support for Content Controls

    With the R1 2021, nous ajoutons également une nouvelle fonctionnalité au Telerik Document Processing pour ceux qui l'utilisent dans l'interface utilisateur Telerik pour les projets ASP.NET MVC. WordsProcessing offre désormais une prise en charge des contrôles de contenu, ce qui vous donne un contrôle total sur les composants. Vous pouvez modifier et restreindre leur comportement, ainsi que créer des modèles pour remplir des données spécifiques à l'intérieur du document.

    Essayez-le

    Vous pouvez essayer tous les nouveaux composants et fonctionnalités de votre page de compte si vous êtes un détenteur de licence actif ou télécharger une version d'essai et vous lancer dans la création d'applications avec Telerik UI pour ASP .NET MVC! Nous vous encourageons également à partager vos idées sur le portail de commentaires et à nous faire savoir comment nous pouvons étendre et améliorer davantage l'interface utilisateur.

    Télécharger maintenant

    Rejoignez le live Session Twitch et webinaire

    Si vous voulez voir tout ce qui est nouveau en action depuis l'interface utilisateur Telerik pour ASP.NET MVC et dans tous les produits Telerik, n'hésitez pas à nous rejoindre pour le webinaire Telerik R1 2021 le mardi 26 janvier de 11 h 00 à 13 h 00 HE et pour la journée en direct Twitch Session le vendredi 29 janvier de 8 h 00 à 17 h 00 HE .

    Enregistrez votre siège pour le webinaire





Source link