Fermer

octobre 16, 2020

4 façons d'incorporer une police impressionnante dans l'interface utilisateur Telerik pour ASP.NET AJAX3 minutes de lecture



Apprenez à appliquer les icônes Font Awesome à certaines des commandes Telerik UI pour ASP.NET AJAX.

Dans cet article, nous montrerons comment utiliser l'une des bibliothèques d'icônes de polices les plus populaires avec les composants de ] Interface utilisateur Telerik pour la suite ASP.NET AJAX en mode de rendu léger. Nous répondrons aux questions suivantes:

  • Comment ajouter des icônes de polices tierces dans les contrôles Telerik?
  • Comment remplacer les icônes intégrées par des icônes externes?

Ne vous inquiétez pas, c'est facile, et je vais vous aider à trouver ces réponses en démontrant quatre cas d'utilisation différents avec quatre contrôles Telerik Web Forms différents.

La palette de styles intégrés fournis avec RadControls est riche et peut satisfaire presque toutes les attentes esthétiques. Comme on s'y attend, les icônes de polices font partie de tout cela.

Font Awesome est vraiment génial! La popularité des icônes Font Awesome ne cesse d'augmenter. Récemment, nous avons reçu plusieurs questions sur la façon dont les super glyphes peuvent être utilisés dans AJAX Controls. Cela nous a incités à créer ce post.

 Font Awesome logo

Pour éviter de rendre ce post extrêmement long, j'ai choisi quatre scénarios avec RadControls sur lesquels on nous a récemment posé des questions. Nous allons démontrer l'intégration de Font Awesome dans les composants Telerik AJAX: Button, Menu, ComboBox et Grid.

Le plan:

  1. Préparez-vous en référençant Font Awesome sur la page
  2. Utilisation de base de FontAwesome dans un RadButton avec modèle de contenu
  3. Utilisez la propriété CssClass pour insérer l'icône de police dans RadLabel
  4. Introduisez l'icône Font Awesome dans RadMenu à l'aide des pseudo éléments
  5. Utilisez les pseudo-éléments pour modifier les icônes intégrées dans les boutons de commande dans RadGrid
  6. Cas bonus: Icônes empilées dans RadButon

Préparez-vous

Incluez FontAwesome sur la page. Vous pouvez trouver une explication détaillée sur la façon de procéder dans le lien suivant: Premiers pas avec FontAwesome .

Avec tous les exemples ci-dessous, nous profiterons de l'approche la plus simple: un code de kit alimenté par CDN . Procurez-vous simplement un kit personnel et placez-le dans la balise head.

< head runat = "server" > [19659006] < title > </ title >

</ head >

Quick check in the Onglet Réseau des DevTools pour voir si le kit fonctionne et si Font Awesome est chargé sur la page.

 Onglet Réseau DevTools

Si vous ne savez pas comment utiliser les outils de développement du navigateur (F12 ) pour inspecter le HTML de la page, les styles appliqués, consultez le blog Améliorez vos compétences de débogage avec Chrome DevTools avant de continuer.

Utilisation de base de FontAwesome dans un RadButton avec un modèle de contenu [19659018] Commençons par la façon la plus intuitive d'introduire les icônes dans une structure HTML générique – «Utilisation basique». Tout ce que vous devez savoir sur cette approche est bien décrit dans Font Awesome – Utilisation de base . En résumé, l'utilisation de base de Font Awesome agit pour affecter des classes CSS prédéfinies à des éléments HTML. Chaque icône de police peut être placée en définissant la classe CSS respective:

< i class = "fas fa- [Name]" > </ i >

Quant au RadButton, le ContentTemplate nous permet d'inclure des éléments HTML à l'intérieur du contrôle, donc il nous permettrait de profiter de l'utilisation de base de Font Awesome.

Déclaration de balisage du RadButton: [19659040] < telerik: RadButton ID = "RadButton1" runat = "server" Text = "RadButton" >

< ContentTemplate >

[19659067] < i class = "fas fa-power-off" > </ i > [19659006] </ ContentTemplate >

</ telerik: RadButton >

Résultat dans le navigateur:

 pic2_RadButton "title =" pic2_RadButton "style =" vertical-align : middle; "/></p data-recalc-dims=

Ce n'est qu'une façon de le faire. Vous pouvez trouver plus de détails sur l'intégration de FontAwesome dans RadButton dans Utilisation d'icônes Font Awesome avec RadButton .

Tirez parti de la propriété CssClass pour apporter l'icône de police dans RadLabel

C'est un moyen assez pratique, mais elle n'est applicable que pour certains des contrôles Telerik car la propriété CssClass s'applique normalement à l'élément wrapper du contrôle.

Remarque: Gardez à l'esprit que par défaut les skins Telerik intégrés seront sera chargé comme dernière référence dans la balise et remplacera la famille de polices fournie avec le kit Font Awesome. En conséquence, l'icône de police souhaitée ne sera pas appliquée. Pour éviter cela, nous pouvons définir la propriété EnableEmbeddedSkins de RadControl sur false et laisser les styles Font Awesome prendre effet.

Vous pouvez également conserver les skins intégrés mais vous assurer que les styles Font Awesome sont chargés après ceux de Telerik en plaçant la balise de script avec le code du kit à la fin de au lieu de dans .

Markup:

< telerik: RadLabel ID = "RadLabel2" runat = "server" Text = " RadLabel " EnableEmbeddedSkins = " false " CssClass = " fas fa-smile-wink "> </ telerik: RadLabel >

Résultat:

 pic3_RadLabelCheck "title =" pic3_RadLabelCheck "/></p data-recalc-dims=

Introduire l'icône Font Awesome dans RadMenu en utilisant les pseudo éléments

Dans certains scénarios, l'approche de base n'est pas applicable en raison du HTML structure rendue par certains des contrôles Telerik les plus complexes. Ensuite, l'approche avancée pour inclure Font Awesome est pratique. Elle est bien décrite ici: Font Awesome – CSS Pseudo-éléments .

Remarque: Les approches de base et avancées conduisent pratiquement au même résultat: CSS appliquant les paramètres de police et la valeur du contenu.

Avec l'approche de base, les icônes de police sont chargées en tant que ressources Font Awesome et nous devons uniquement utiliser le nom de classe prédéfini correct. Dans l'approche avancée, nous devons écrire nos règles CSS. Découvrez les styles appliqués automatiquement au RadLabel dans la capture d'écran de la section précédente.

Apportons une icône de police dans un MenuItem dans un RadMenu.

Nous pouvons utiliser la propriété CssClass pour définir un nom de classe personnalisé qui nous aidera à appliquer l'icône à l'élément souhaité uniquement.

Déclaration:

< telerik: RadMenu ID = "RadMenu1" runat = "serveur" >

< Items >

< telerik: RadMenuItem Text = "bag" CssClass = "shoppingBag" />

< telerik: RadMenuItem Texte ] = "Item 2" CssClass = "item2" />

< telerik: RadMenuItem Text = "Item 3" CssClass = "i tem3 " />

</ Items >

</ telerik: RadMenu >

Dans le navigateur, utilisez DevTools pour définir l'élément DOM à styliser. Nous aurions besoin d'un sélecteur suffisamment spécifique pour nous assurer que notre CSS personnalisé prendra effet et s'appliquera uniquement aux éléments désirés.

 pic4_MenuSelector "title =" pic4_MenuSelector "/></p data-recalc-dims=

CSS pour introduire la police- icône:

.RadMenu .shoppingBag> .rmLink.rmRootLink {

famille de polices : "Font Awesome 5 Free" [19659023];

font-weight : 900 ; [19659006] }

.RadMenu .shoppingBag> .rmLink.rmRootLink: avant {

contenu : " f290" ;

}

Apparence obtenue:

 pic5_RadMenuResult "title =" pic5_RadMenuResult "/></p data-recalc-dims=

Utilisez le pseudo-élément ents pour modifier les icônes intégrées dans les boutons de commande de RadGrid

Les icônes de police intégrées dans les contrôles Telerik sont placées dans le pseudo élément :: before . Afin de les remplacer par des icônes Font Awesome, nous devons nous assurer que nous appliquons un CSS personnalisé avec des sélecteurs suffisamment «puissants» pour remplacer l'icône intégrée.

Tout d'abord, nous devons définir l'élément HTML contenant l'icône incorporée, puis utiliser les sélecteurs CSS appropriés pour remplacer l'apparence par défaut.

Inspecter l'icône incorporée et définir les sélecteurs:

 pic6_RadGrid_InspectIcon "title = "pic6_RadGrid_InspectIcon" /></p data-recalc-dims=

Nous pouvons effectuer un changement en direct à l'aide des outils de développement pour trouver le meilleur ajustement:

 pic7_RadGridLiveCheck "title =" pic7_RadGridLiveCheck "/> <span data-recalc-dims=

Une fois que nous le savons , nous pouvons l'appliquer sur la page avec quelques lignes de CSS:

.RadGrid .t-font- icon .rgIcon.rgDelIcon: before {

famille de polices : "Font Awesome 5 Free" ;

content [19659023]: " f044" ;

}

Résultat:

 pic8_RadGridStyled "title =" pic8_ RadGridStyled "/></p data-recalc-dims=

En utilisant les pseudo-éléments et l'approche ci-dessus, nous pouvons styliser les icônes de polices incorporées dans n'importe quel contrôle Telerik. Pour en savoir plus sur le style des boutons RadGrid, consultez Utilisation de Font Awesome dans les boutons RadGrid .

Remarque: Les icônes font partie de la famille de polices afin que nous puissions modifier leur taille et leur couleur. tout comme il est fait avec le texte normal.

Icônes empilées dans RadButton

Font Awesome est génial et fournit un moyen agréable de placer une icône sur une autre pour obtenir une icône significative plus complexe.

Nous utilisons les icônes empilées à l'intérieur d'un RadButton:

 Font Awesome Stacked icons

Voici comment nous avons réalisé le bouton illustré ci-dessus:

< style >

.hidden {

display: none;

}

.fa-stack. cornered-tr {

position: absolue;

haut: 0px! important;

text-align: right;

hauteur de ligne: 1em;

text-shadow: 1px 1px 1px # 000;

} [19659006] </ style >

< script >

function onClientClicked (sender, args) {

var checkIcon = $ ('. checkIcon');

checkIcon.toggleClass ("hidden"); [19659006] }

</ script >

< telerik: RadButton ID = "RadButton1" runat ] = "server" AutoPostBack = "false" OnClientClicked = "onClientClicked" >

< ContentTemplate >

< span class = "fa-stack fa-lg" >

< i class = "far fa-user fa-stack-2x" > </ i >

< i class = "fas fa-check fa-stack-1x cornered-tr checkIcon hidden" style = "color: lightgreen" > </ i >

</ span >

</ ContentTemplate >

</ telerik: RadButton >

Rechercher Pour en savoir plus sur les icônes empilées, cliquez sur le lien suivant: Font Awesome – Icônes empilées

Si cela ne vous suffit pas, voyez ce qui peut être réalisé avec la version SVG + JS de Font Awesome: Superposition , Texte et compteurs .

Nous avons choisi certains des scénarios les plus courants pour intégrer Font Awesome dans les contrôles Telerik AJAX. Cependant, la suite AJAX contient plus de 120 contrôles différents. Donc, si vous souhaitez utiliser des icônes de police avec un contrôle AJAX qui n'est pas mentionné dans le billet de blog, utilisez la section commentaires ci-dessous ou soumettez un ticket à l'équipe d'assistance de Telerik!

pour ASP.NET AJAX, vous pouvez télécharger sa version d'évaluation entièrement fonctionnelle à partir du lien ci-dessous:

 Démarrer l'essai gratuit "title =" Démarrer l'essai gratuit "/> </a data-recalc-dims=





Source link

0 Partages
Revenir vers le haut