web-dev-qa-db-fra.com

Comment ajouter une image / une icône à l'en-tête des pages d'administration d'un composant?

Je construis mon propre composant et je voudrais ajouter mes icônes/images à gauche du titre dans les pages administratives du composant (backend), comme le font les composants principaux.

enter image description here

Comment faire ça?

componentdevelopmentadministratorviewadministration
5
FFrewin

Vous pouvez définir une classe pour le titre de l'en-tête de votre vue, tout en créant la barre d'outils de votre vue dans view.html.php.

Dans votre fonction "addToolbar ()", vous pouvez appeler la méthode JToolbarHelper :: title () et spécifier un deuxième paramètre (chaîne) pour définir une classe CSS dans le titre de la barre d’outils, avec un préfixe "icon-".

Exemple:

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

Cela entraînera le code HTML suivant:

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

En réalité, vous pouvez taper plusieurs mots séparés par un espace. Ils seront ajoutés en tant que classes supplémentaires.

Vous pouvez ensuite inclure dans le fichier CSS de votre composant la règle de votre classe et spécifier votre image d'arrière-plan. L'emplacement de vos fichiers css et images doit être dans le dossier Media.

Par exemple:

media/mycomponent/images/

media/commycomponent/css/admin.styles.css

Cependant, gardez à l'esprit que dans Joomla 3, il est courant de ne pas utiliser d'images, plutôt que d'utiliser le pseudo element css :: before avec l'attribut CSS "content", en tirant parti de la police icomoon de Fontawesome déjà chargée dans le modèle d'admin (et vous le trouverez ici: "media/jui/fonts /").

L'exemple CSS ci-dessous ajoute l'icône "Home" à gauche du titre de la vue:

.icon-myclass::before {
    content: "\0021"; 
}
  • "\ 0021" est l'unicode du point d'exclamation (!) * /
6
FFrewin