[Astuce] Composant Puce

[steegan]

Bonjour, existe t'il un composant ou plugin pour avoir des puce en forme de V dans l’éditeur de texte ? merci beaucoup

[wabaw]

Re : Composant Puce

Bonjour, les puces sont gérées par la feuille style CSS. Pour modifier ceci, il faut donc agir sur les styles css. Une petite recherche sur Google te donneras une foultitude de résultats.

[marie-louise]

Re : Composant Puce

Bonjour,

J'ai suivi le conseil de wabaw étant intéressée par ce genre de chose et j'ai trouvé ceci à ajouter dans le CSS de ton site

/*on supprime la puce d'origine*/
li {list-style-type: none;}
li:before {
content: "v "; /* on affiche une chaîne de caractère */
}

Le v étant modifiable à volonté.

[wabaw]

Re : Composant Puce

Ce que fait mairie-Louise est une possibilité. On peut aussi avec la propriété list-style-image assigner une image perso aux items de liste :
ul {
list-style-image: url('mon-image-en-forme-de-v.png');
}

[lomart]

Re : Composant Puce

Bonjour,

Une variante (plus graphique) à la solution de Marie-Louise

li {list-style-type: none;}  /*on supprime la puce d'origine*/
li:before { content: "\2714  ";}   /* on affiche un caractère unicode */

Tous les caractères spéciaux unicode sur cette page:

https://fr.wikipedia.org/wiki/Table_des_caract%C3%A8res_Unicode_%282000-2FFF%29

Cette méthode universelle ne nécessite aucune ressource supplémentaire.

On peut imaginer de créer des classes avec différents symboles pour les puces.
Code CSS

/*on supprime la puce d'origine*/
ul[class^="puce-"], li[class^="puce-"]  {list-style-type: none;}
/* les différentes puces */
ul.puce-ok li:before, ul li.puce-ok:before { content: "\2714  "; color:green;}
ul.puce-cancel li:before, ul li.puce-cancel:before { content: "\2718  "; color:red;}
ul.puce-carre li:before, ul li.puce-carre:before { content: "\25a3  ";color:blue;}

Code HTML

    <p>Exemple avec la même puce pour tous les items</p>
    <ul class="puce-ok">
        <li>test 1</li>
        <li>test 2 </li>
        <li>test 3</li>
    </ul>
    <p>Exemple avec une puce par défaut et des puces différentes</p>
    <ul class="puce-ok">
        <li>test 1</li>
        <li class="puce-cancel">test 2 </li>
        <li>test 3</li>
        <li class="puce-carre">test 4</li>
    </ul>

ce qui donne

[marie-louise]

Re : Composant Puce

Vous êtes géniaux même quand je tente d'aider, j'apprends des choses

[lomart]

Re : Composant Puce

Vous êtes géniaux même quand je tente d'aider, j'apprends des choses

C'est en voyant ton code que j'ai eu l'idée de divaguer en créant ces règles css.
Le but d'un forum, c'est aussi cela