HTML + CSSOverlays

Palette de commandes

Une liste d'actions à rechercher, avec groupes, raccourcis et navigation aux flèches, filtrée pendant la saisie.

Réglages

16px
1x

Code

<div class="uv-ocp"><div class="pg" aria-hidden="true"><i class="h"></i><i></i><i></i><i></i><i></i><i class="s"></i></div><button type="button" class="fire">Rechercher <kbd>⌘K</kbd></button><div class="scr"></div><div class="dl" role="dialog" aria-modal="true" aria-label="Palette de commandes"><label class="sb"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="6.5"/><path d="M20 20l-4.2-4.2"/></svg><input placeholder="Tape une commande ou cherche" aria-label="Tape une commande ou cherche" role="combobox" aria-expanded="true" aria-controls="uv-ocp-l" autocomplete="off"><kbd>Esc</kbd></label><ul id="uv-ocp-l" role="listbox"><li class="gp" role="presentation">Actions</li><li role="option" class="op" aria-selected="true" data-g="Actions"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg><span>Créer un projet</span><kbd>⌘N</kbd></li><li role="option" class="op" aria-selected="false" data-g="Actions"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="8.5" r="3.5"/><path d="M2.5 20c.6-3.4 3.2-5.5 6.5-5.5s5.9 2.1 6.5 5.5M18.5 8v6M15.5 11h6"/></svg><span>Inviter quelqu’un</span><kbd>⌘I</kbd></li><li role="option" class="op" aria-selected="false" data-g="Actions"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 4v11M7.5 10.5L12 15l4.5-4.5M5 19.5h14"/></svg><span>Exporter le rapport</span><kbd>⌘E</kbd></li><li class="gp" role="presentation">Aller à</li><li role="option" class="op" aria-selected="false" data-g="Aller à"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M12 2.5v3M12 18.5v3M2.5 12h3M18.5 12h3M5.3 5.3l2.1 2.1M16.6 16.6l2.1 2.1M5.3 18.7l2.1-2.1M16.6 7.4l2.1-2.1"/></svg><span>Réglages</span></li><li role="option" class="op" aria-selected="false" data-g="Aller à"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5.5" width="18" height="13" rx="2.5"/><path d="M3 10h18"/></svg><span>Facturation</span></li><li role="option" class="op" aria-selected="false" data-g="Aller à"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="8.5" r="3.5"/><circle cx="17" cy="10" r="2.5"/><path d="M2.5 20c.6-3.4 3.2-5.5 6.5-5.5s5.9 2.1 6.5 5.5M16 14.6c2.6.2 4.6 2 5 4.9"/></svg><span>Équipe</span></li><li class="em" role="presentation">Aucun résultat</li></ul></div></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 Overlays

Voir tout : Overlays

Où l’utiliser

Les utilisateurs avancés attendent une palette de commandes qui s'ouvre avec Commande ou Ctrl et K. Celle-ci apparaît sur la page assombrie avec un champ de recherche, des commandes groupées entre actions et navigation, des raccourcis clavier et une ligne surlignée qui suit les flèches ou le pointeur. La saisie filtre la liste instantanément et masque les groupes vides.

Entrée lance la commande surlignée et ferme la palette, Échap ou un clic sur le fond la ferment, et le champ suit le motif combobox avec listbox. Remplace les commandes par tes propres routes et actions.