webentwicklung-frage-antwort-db.com.de

PrimeFaces-Symbole

Ich kann keine Möglichkeit finden, den Pfeil icons wie die in der PickList-Komponente vorhandenen auszuwählen, um sie in anderen CommandButtons-Elementen zu verwenden.

Nun, ich weiß, dass man, um ein Symbol in CommandButton zu verwenden, diesen Anweisungen folgen muss:

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

nachdem Sie das Sternsymbol in einer CSS-Datei definiert haben:

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

ich würde es jedoch vorziehen, genau die gleichen Pfeile wie für die PickList-Komponente zu verwenden.

jquery-uijsfprimefaces
23
perissf

Primefaces verwenden jQuery themeroller für die Benutzeroberfläche. Alle in Primefaces verwendeten Symbole stammen von dort. Einfach das Mouseover-Symbol (im Scanner) und etwas wie: .ui-icon-arrow-1-e erscheint. Dann benutze es so: 

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

Hier eine Liste aller verfügbaren jQuery-UI-Symbole

jQueryUI Icons Cheatsheet N # 1 (klicken Sie auf Toggle text, um alle Namen der Icons zu erhalten)

jQueryUI Icons Cheatsheet N # 2

zumindest in <p:commandLink können Sie die Symbole mit styleClass anwenden, zum Beispiel styleClass="ui-icon ui-icon-trash" (Denken Sie nicht daran, dass Sie es mit p:commandButton versuchen - immer bevorzugt <p:commandLink)

B.T.W, <p:commandButton hat kein outcome-Attribut, <p:button hat es ...

Zusätzlich zu können Sie seit PF v5.1.1 auch die Symbole von Font Awesome verwenden, indem Sie den primefaces.FONT_AWESOME context-Parameter wie folgt auf true setzen

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

und es so benutzen:

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

oder

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

Showcase: PrimeFaces - FontAwesome - Seit v5.1.1

46
Daniel

Versuchen Sie dies, es hat für mich funktioniert

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