web-dev-qa-db-fra.com

Icônes PrimeFaces

Je ne peux pas trouver un moyen de choisir la flèche icons comme celles présentes dans le composant PickList, afin de les utiliser dans une autre CommandButtons.

Eh bien, je sais que pour utiliser une icône dans le bouton de commande, il faut suivre ces instructions:

<p:commandButton outcome="target" icon="star" title="With Icon"/>

avoir défini l'icône étoile dans un fichier css:

.star {
    background-image: url("images/star.png");
}

mais je préférerais utiliser exactement les mêmes flèches que pour le composant PickList.

jquery-uijsfprimefaces
23
perissf

Primefaces utilise jQuery themeroller pour personnaliser l’interface utilisateur. Toutes les icônes utilisées dans Primefaces viennent de là. Cliquez avec la souris sur l’icône que vous aimez (dans le lecteur) et quelque chose comme: .ui-icon-arrow-1-e apparaîtra. Ensuite, utilisez-le comme ceci: 

<p:commandButton action="target" icon="ui-icon ui-icon-arrow-1-e" value="Arrow icon"/>
31
Fallup

Voici une liste de toutes les icônes disponibles de l'interface utilisateur jQuery

Icônes jQueryUI Cheatsheet N # 1 (cliquez sur Toggle text pour obtenir tous les noms des icônes)

Icônes jQueryUI Cheatsheet N # 2

au moins dans <p:commandLink, vous pouvez appliquer les icônes en utilisant styleClass, par exemple styleClass="ui-icon ui-icon-trash" (vous ne vous souvenez pas d’avoir essayé la même chose sur p:commandButton - toujours préféré <p:commandLink)

B.T.W, <p:commandButton n'a pas d'attribut outcome, <p:button l'a ...

En outre depuis PF v5.1.1, vous pouvez également utiliser les icônes de Font Awesome par défaut, en définissant sur true le paramètre de contexte primefaces.FONT_AWESOME, comme ceci

<context-param>
   <param-name>primefaces.FONT_AWESOME</param-name>
   <param-value>true</param-value>
</context-param>

et en l'utilisant comme ceci:

<p:commandButton value="Download" icon="fa fa-download" type="button"/>

ou

<p:menuitem value="Refresh" url="#" icon="fa fa-refresh"/>

Voir la vitrine: PrimeFaces - FontAwesome - Since v5.1.1

46
Daniel

Essayez ça a fonctionné pour moi

.star {background:url("images/star.png") no-repeat !important;
     width:20px;
     height:16px;
    }
0
maresca