Paleta de comandos (command)
Una búsqueda modal de acciones. Pulsa Ctrl+K (o ⌘+K, o / fuera de un campo de texto) y escribe: la lista filtra por etiqueta y palabras clave, los grupos sin coincidencias desaparecen, las flechas mueven el resalte y Enter sigue el enlace o ejecuta la acción. Los elementos se sirven como enlaces y botones normales dentro de un diálogo, así que todo lo que hace la paleta existe también en otra parte de la página. El componente compone el diálogo y añade la semántica de listbox, los atajos, el filtrado, una lista opcional de acciones recientes y una API para añadir acciones en tiempo de ejecución.
<p class="iv-u-m-0" id="cmd-note">Demo palette. The four page links point back to this note instead of a real
page, the three actions only emit <code>iv:command</code> and change nothing, and every destination of the panel is
also reachable from the normal navigation of the page: the palette is a shortcut, never the only route. Press
<kbd>Ctrl</kbd> + <kbd>K</kbd>, <kbd>⌘</kbd> + <kbd>K</kbd> or <kbd>/</kbd> to open it.</p>
<button class="iv-button iv-button--secondary" data-iv-open="cmd" hidden aria-keyshortcuts="Control+K Meta+K">Open the command palette</button>
<dialog class="iv-dialog iv-command" id="cmd" data-iv-component="command" aria-label="Command palette">
<div class="iv-dialog__panel">
<div class="iv-command__field">
<label class="iv-u-sr-only" for="cmd-q">Search actions</label>
<input class="iv-input iv-command__input" id="cmd-q" type="search" autocomplete="off" placeholder="Type a command or search…">
</div>
<nav class="iv-command__groups">
<section class="iv-command__group" data-iv-group="Pages">
<h3 class="iv-command__heading">Pages</h3>
<ul class="iv-command__list">
<li>
<a class="iv-command__item" href="#cmd-note" data-iv-keywords="install setup start">
<span class="iv-command__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
<span class="iv-command__label">Getting started</span>
<kbd class="iv-command__kbd">G S</kbd>
</a>
</li>
<li>
<a class="iv-command__item" href="#cmd-note" data-iv-keywords="button card dialog widgets">
<span class="iv-command__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z"/></svg></span>
<span class="iv-command__label">Components</span>
</a>
</li>
<li>
<a class="iv-command__item" href="#cmd-note" data-iv-keywords="colour palette spacing variables">
<span class="iv-command__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="8"/><path d="M12 4v16"/></svg></span>
<span class="iv-command__label">Design tokens</span>
</a>
</li>
<li>
<a class="iv-command__item" href="#cmd-note" data-iv-keywords="releases versions news">
<span class="iv-command__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M8 6h12M8 12h12M8 18h12M4 6h.01M4 12h.01M4 18h.01"/></svg></span>
<span class="iv-command__label">Changelog</span>
</a>
</li>
</ul>
</section>
<section class="iv-command__group" data-iv-group="Actions">
<h3 class="iv-command__heading">Actions</h3>
<ul class="iv-command__list">
<li>
<button class="iv-command__item" type="button" data-iv-command="toggle-theme" data-iv-keywords="dark light appearance">
<span class="iv-command__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"><path d="M20 14a8 8 0 1 1-10-10 7 7 0 0 0 10 10z"/></svg></span>
<span class="iv-command__label">Toggle theme</span>
</button>
</li>
<li>
<button class="iv-command__item" type="button" data-iv-command="copy-link" data-iv-keywords="url share clipboard">
<span class="iv-command__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M10 14a4 4 0 0 0 6 .5l2-2a4 4 0 0 0-6-6l-1 1"/><path d="M14 10a4 4 0 0 0-6-.5l-2 2a4 4 0 0 0 6 6l1-1"/></svg></span>
<span class="iv-command__label">Copy page link</span>
</button>
</li>
<li>
<button class="iv-command__item" type="button" data-iv-command="print-page" data-iv-keywords="paper pdf export">
<span class="iv-command__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"><path d="M7 9V4h10v5M7 18H5v-6h14v6h-2M8 14h8v6H8z"/></svg></span>
<span class="iv-command__label">Print this page</span>
</button>
</li>
</ul>
</section>
<section class="iv-command__group" data-iv-group="Help">
<h3 class="iv-command__heading">Help</h3>
<ul class="iv-command__list">
<li>
<a class="iv-command__item" href="#cmd-note" data-iv-keywords="keyboard keys accessibility">
<span class="iv-command__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M3 6h18v12H3zM7 10h.01M11 10h.01M15 10h.01M8 14h8"/></svg></span>
<span class="iv-command__label">Shortcuts</span>
<kbd class="iv-command__kbd">?</kbd>
</a>
</li>
<li>
<a class="iv-command__item" href="#cmd-note" data-iv-keywords="contact question feedback">
<span class="iv-command__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="9"/><path d="M12 17h.01M9.5 9.5a2.5 2.5 0 1 1 3 3.5V14"/></svg></span>
<span class="iv-command__label">Ask for support</span>
</a>
</li>
</ul>
</section>
</nav>
<p class="iv-command__empty" hidden>No results</p>
<footer class="iv-command__hints" aria-hidden="true"><kbd>↑↓</kbd> navigate <kbd>↵</kbd> open <kbd>esc</kbd> close</footer>
</div>
</dialog>// data-iv-component="command"
{
open: "cmd",
group: "Pages",
keywords: "install setup start",
command: "toggle-theme",
}Variante de cristal, recientes, sin atajo de barra
<p class="iv-u-m-0" id="cmd-glass-note">Glass palette with recent commands. Demo only: the page links point back to
this note, the two actions emit <code>iv:command</code> and nothing else, and the same destinations are part of the
normal navigation of the page. What you activate is kept in <code>localStorage</code> under
<code>iv-command-recent</code> and comes back as a “Recent” group the next time the palette opens with an empty
search. <kbd>/</kbd> is switched off here; <kbd>Ctrl</kbd> + <kbd>K</kbd> and <kbd>⌘</kbd> + <kbd>K</kbd> still open it.</p>
<button class="iv-button iv-button--secondary" data-iv-open="cmd-glass" hidden aria-keyshortcuts="Control+K Meta+K">Open the command palette</button>
<dialog class="iv-dialog iv-command iv-command--glass" id="cmd-glass" data-iv-component="command" data-iv-remember="true" data-iv-slash="false" aria-label="Command palette">
<div class="iv-dialog__panel">
<div class="iv-command__field">
<label class="iv-u-sr-only" for="cmd-glass-q">Search actions</label>
<input class="iv-input iv-command__input" id="cmd-glass-q" type="search" autocomplete="off" placeholder="Type a command or search…">
</div>
<nav class="iv-command__groups">
<section class="iv-command__group" data-iv-group="Pages">
<h3 class="iv-command__heading">Pages</h3>
<ul class="iv-command__list">
<li>
<a class="iv-command__item" href="#cmd-glass-note" data-iv-keywords="install setup start">
<span class="iv-command__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
<span class="iv-command__label">Getting started</span>
<kbd class="iv-command__kbd">G S</kbd>
</a>
</li>
<li>
<a class="iv-command__item" href="#cmd-glass-note" data-iv-keywords="button card dialog widgets">
<span class="iv-command__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z"/></svg></span>
<span class="iv-command__label">Components</span>
</a>
</li>
<li>
<a class="iv-command__item" href="#cmd-glass-note" data-iv-keywords="colour palette spacing variables">
<span class="iv-command__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="8"/><path d="M12 4v16"/></svg></span>
<span class="iv-command__label">Design tokens</span>
</a>
</li>
</ul>
</section>
<section class="iv-command__group" data-iv-group="Actions">
<h3 class="iv-command__heading">Actions</h3>
<ul class="iv-command__list">
<li>
<button class="iv-command__item" type="button" data-iv-command="toggle-theme" data-iv-keywords="dark light appearance">
<span class="iv-command__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"><path d="M20 14a8 8 0 1 1-10-10 7 7 0 0 0 10 10z"/></svg></span>
<span class="iv-command__label">Toggle theme</span>
</button>
</li>
<li>
<button class="iv-command__item" type="button" data-iv-command="copy-link" data-iv-keywords="url share clipboard">
<span class="iv-command__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M10 14a4 4 0 0 0 6 .5l2-2a4 4 0 0 0-6-6l-1 1"/><path d="M14 10a4 4 0 0 0-6-.5l-2 2a4 4 0 0 0 6 6l1-1"/></svg></span>
<span class="iv-command__label">Copy page link</span>
</button>
</li>
</ul>
</section>
<section class="iv-command__group" data-iv-group="Help">
<h3 class="iv-command__heading">Help</h3>
<ul class="iv-command__list">
<li>
<a class="iv-command__item" href="#cmd-glass-note" data-iv-keywords="keyboard keys accessibility">
<span class="iv-command__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M3 6h18v12H3zM7 10h.01M11 10h.01M15 10h.01M8 14h8"/></svg></span>
<span class="iv-command__label">Shortcuts</span>
<kbd class="iv-command__kbd">?</kbd>
</a>
</li>
</ul>
</section>
</nav>
<p class="iv-command__empty" hidden>No results</p>
<footer class="iv-command__hints" aria-hidden="true"><kbd>↑↓</kbd> navigate <kbd>↵</kbd> open <kbd>esc</kbd> close</footer>
</div>
</dialog>// data-iv-component="command"
{
open: "cmd-glass",
remember: true,
slash: false,
group: "Pages",
keywords: "install setup start",
command: "toggle-theme",
}Opciones
| Opción | Atributo | Por defecto | Efecto |
|---|---|---|---|
shortcut | data-iv-shortcut | true | Atajo global Ctrl+K / ⌘+K. |
slash | data-iv-slash | true | / abre la paleta cuando el foco no está en un campo editable. |
remember | data-iv-remember | false | Guarda los últimos elementos activados en el almacenamiento local y los muestra en un grupo de recientes. |
maxRecent | data-iv-max-recent | 5 | Cuántos recientes se conservan. |
recentText, emptyText, placeholder | data-iv-recent-text … | Recent, No results | Textos del grupo generado, del estado vacío y del campo. |
Métodos y eventos
open(), close(), add(action), remove(id), clear(), filter(query), destroy(); lectura de isOpen, query y actions. Una acción es { id, label, group, keywords, href?, shortcut?, run? }. Eventos en el diálogo: los propios del diálogo iv:open/iv:close; iv:command (cancelable, detail.id, label, item) y después iv:commanded; iv:filter con query y visible.
Teclado y tecnología asistiva
La paleta es un diálogo modal con nombre; el campo es un combobox cuyo listbox es la lista de acciones, el elemento resaltado se expone con aria-activedescendant, el recuento de resultados se anuncia con cortesía, los atajos se muestran en kbd y se declaran en el disparador con aria-keyshortcuts. Escape cierra y devuelve el foco al disparador.
Sin JavaScript
El diálogo permanece cerrado y su disparador oculto; los enlaces que contiene deben existir también en la navegación de la página, que es como está escrita la fixture.
Errores frecuentes
- Acciones que solo existen en la paleta: descubrirlas solo con teclado no basta.
- Usarla para buscar contenido: para eso está la búsqueda del sitio; la paleta es para acciones y destinos.
- Recordar recientes en dispositivos compartidos sin avisar.
Índice de clases
Partes y modificadores de esta familia que los ejemplos de arriba no muestran. La lista completa por hoja está en la referencia.
| Clase | Qué hace |
|---|---|
iv-command__status | Región viva que anuncia cuántos comandos coinciden. |
iv-command__item--active | Ítem bajo el cursor virtual; sigue a aria-activedescendant, no al foco. |