it-swarm.dev

Come aggiungere l'immagine / l'icona all'intestazione delle pagine di amministrazione di un componente?

Sto costruendo il mio componente e vorrei aggiungere le mie icone/immagini a sinistra del Titolo nelle pagine amministrative del componente (backend), come hanno fatto i componenti principali.

enter image description here

Come fare questo?

5
FFrewin

È possibile definire una classe per il titolo dell'intestazione della vista, mentre si crea la barra degli strumenti per la vista all'interno di view.html.php.

All'interno della funzione "addToolbar ()", puoi chiamare il metodo JToolbarHelper :: title () e specificare un secondo parametro (stringa) per definire una classe CSS al titolo della barra degli strumenti, con il prefisso "icona-".

Esempio:

JToolbarHelper::title(JText::_('COM_MYCOMPONETE_LIST_ITEMS'), 'myclass');

Ciò si tradurrà nel seguente html:

<h1 class="page-title">
    <span class="icon-myclass"></span>
    My Componete: List Items
</h1>

In realtà puoi digitare più di una parola separate da spazio e queste verranno aggiunte come classi extra.

È quindi possibile includere nel file CSS del componente, la regola per la classe e specificare l'immagine di sfondo. Il percorso del file CSS e di immagini deve trovarsi nella cartella Media.

Per esempio:

media/mycomponent/images/

media/commycomponent/css/admin.styles.css

Tuttavia, tieni presente che in Joomla 3 è una pratica comune non usare le immagini, piuttosto che usare lo pseudo elemento css :: before con l'attributo CSS "content", sfruttando il carattere icomoon di Fontawesome che è già caricato in il modello admin (e puoi trovarlo qui: "media/jui/fonts /").

Nell'esempio CSS seguente, verrà aggiunta l'icona "Home", a sinistra del titolo della vista:

.icon-myclass::before {
    content: "\0021"; 
}
  • "\ 0021" è l'unicode per il punto esclamativo (!) * /
6
FFrewin