Come personalizzare il componente di Growl PrimeFaces

Inserito da Alin Constantin

Io credo che ogni fan JSF ha sentito parlare PrimeFaces, la suite open source di componenti per Java Server Faces

. Dal mio punto di vista, è un vero piacere per esplorare i componenti PrimeFaces e per ottenere giocare con le loro capacità. Recentemente, ho dovuto utilizzare un componente personalizzato ringhio, nel senso che avevo bisogno di farla apparire in luoghi diversi e cambiare il suo aspetto. Vorrei condividere questa esperienza con voi!
Il risultato finale (dopo la personalizzazione) viene mostrato nella figura seguente: - Sostituire l'icona di informazioni di default con un'immagine personalizzata può essere realizzato utilizzando il infoIcon attributo di componente:

vista origine

stampa?

1.< p: ringhio id = "growl" infoIcon = ". / imgs / user.png" />

- Inoltre, è possibile personalizzare le proprietà CSS dell'immagine, come larghezza e altezza, modificando la classe CSS ui-growl-immagine :

vista origine

stampa?

1.. ui-growl-immagine {

2.larghezza : 100px ;

3.Altezza : 95px ;

4.float : sinistra ;

5.}

- Per impostazione predefinita, il messaggio del ringhio sarà visualizzato per 6000 ms e dopo che saranno nascosti. È possibile modificare questo periodo, impostando l' appiccicoso attributo di vero (il messaggio non sarà mai nascondere) o cambiare la durata della vita degli attributi.

vista origine

stampa?

1.< p: ringhio id = "growl" infoIcon = "/ imgs / user.png". showDetail = "true"

2.appiccicoso = "false" vita = "10000" />

- Lo sfondo ringhio è anche personalizzabile attraverso i CSS. Questa volta operano su ui-growl-item-contenitore di classe:

vista origine

stampa?

1.. ui-growl-item-container {

2.background-image : url ( '. / imgs / sfondo.jpg' );

3.}

- L'icona di chiusura ringhio è impostato di default in alto a sinistra. Se si vuole che appaia in un posto diverso, come in alto a destra, è necessario modificare il CSS ui-growl-icon-stretta classe:

vista origine

stampa?

1.. ui-growl-icon-stretta {

2.cursore : pointer ;

3.posizione : assoluto ;

4.sinistra : 335px ;

5.top : 15px ;

6.}

- È anche possibile modificare il font e lo stile della nota di sintesi e il messaggio di dettaglio, come di seguito:

vista origine

stampa?

1.. ui-growl-title {

2.dei font : 28px "Lucida Console" , Monaco, monospace ;

3.text-align : centro ;

4.}

5.. ui-growl-messaggio p {

6.dei font : 20px "Lucida Console" , Monaco, monospace ;

7.letter-spacing : -1px ;

8.}

- Infine, è possibile posizionare il ringhio ovunque si desideri, in alto a sinistra, in basso a sinistra, in basso a destra, centro e così via per ui-growl classe:

vista origine

stampa?

1.. ui-growl {

2.posizione : fisso ;

3.top : 40% ;

4.sinistra : 37% ;

5.larghezza : 360px ;

6.Altezza : 110px ;

7.z-index : 9999 ;

8.}

Questo è tutto! Spero vi piaccia!

Corso Java - Corsi Java - Corsi programmazione Java

Corso programmazione Android - Certificazione Android