- LMLucía MartínDiseño
- POPablo OrtegaProducto
- MRMarta RuizDesarrollo
- JSJorge SanzVentas
- NVNuria VidalMarketing
Escribe @ y elige con las flechas y Enter
Commentaire avec mentions
Tape une arobase et une liste de personnes s'ouvre ; la mention choisie reste surlignée dans le texte même.
Réglages
Code
<div class="uvq06-mn"><label for="uvq06-mn-in" class="lb">Commentaire</label><div class="fd"><div class="bk" aria-hidden="true"></div><textarea id="uvq06-mn-in" rows="3" role="combobox" aria-expanded="false" aria-controls="uvq06-mn-ls" aria-autocomplete="list" placeholder="Tape @ pour mentionner"></textarea><ul id="uvq06-mn-ls" role="listbox" aria-label="Personnes" hidden><li role="option" id="uvq06-mn-o0" data-n="Lucía Martín" aria-selected="false"><i style="--a:#f97316">LM</i><span>Lucía Martín</span><em>Design</em></li><li role="option" id="uvq06-mn-o1" data-n="Pablo Ortega" aria-selected="false"><i style="--a:#0ea5e9">PO</i><span>Pablo Ortega</span><em>Produit</em></li><li role="option" id="uvq06-mn-o2" data-n="Marta Ruiz" aria-selected="false"><i style="--a:#16a34a">MR</i><span>Marta Ruiz</span><em>Développement</em></li><li role="option" id="uvq06-mn-o3" data-n="Jorge Sanz" aria-selected="false"><i style="--a:#a855f7">JS</i><span>Jorge Sanz</span><em>Ventes</em></li><li role="option" id="uvq06-mn-o4" data-n="Nuria Vidal" aria-selected="false"><i style="--a:#e11d48">NV</i><span>Nuria Vidal</span><em>Marketing</em></li></ul></div><p class="ht">Tape @ et choisis avec les flèches et Entrée</p></div>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Champs
Voir tout : ChampsOù l’utiliser
Un champ de commentaire qui se comporte comme ceux des outils d'équipe. Taper @ ouvre une combobox accessible avec avatars et rôles, filtrée pendant la saisie et pilotée avec les flèches, Entrée ou Tab. Les noms choisis sont surlignés dans la zone de texte grâce à un calque miroir placé derrière le champ transparent, et l'édition native, l'annulation et le correcteur continuent de marcher.
Remplace la liste par ton équipe et choisis la couleur principale pour le surlignage et l'anneau de focus. Il convient aux commentaires de tâches, aux revues de code et aux messageries, et l'astuce du miroir marche aussi pour des hashtags ou des variables.