Context menu — OutfitKit
Context menu
Menú flotante para acciones rápidas (típicamente abierto con click derecho). Items .ok-ctx-menu-item con icon + texto + atajo opcional. Soporta --danger y __divider.
Acciones de pedido
Pedido FCT-2026-00184
<div style="position:relative;height:280px;width:280px">
<div class="ctx-menu">
<div class="label">Pedido FCT-2026-00184</div>
<button class="ctx-menu-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4v16h16v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4z"/></svg>
<span>Editar</span>
<span class="ctx-menu-shortcut">⌘E</span>
</button>
<button class="ctx-menu-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
<span>Duplicar</span>
<span class="ctx-menu-shortcut">⌘D</span>
</button>
<button class="ctx-menu-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><path d="m16 6-4-4-4 4M12 2v13"/></svg>
<span>Compartir</span>
<span class="ctx-menu-shortcut">⌘⇧S</span>
</button>
<div class="ctx-menu-divider"></div>
<button class="ctx-menu-item ctx-menu-item--danger">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></svg>
<span>Eliminar pedido</span>
<span class="ctx-menu-shortcut">⌫</span>
</button>
</div>
</div>{% from "context-menu.jinja" import context_menu %}
<div style="position:relative;height:280px;width:280px">
{% call context_menu(label="Pedido FCT-2026-00184") %}
<button class="ctx-menu-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4v16h16v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4z"/></svg>
<span>Editar</span>
<span class="ctx-menu-shortcut">⌘E</span>
</button>
<button class="ctx-menu-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
<span>Duplicar</span>
<span class="ctx-menu-shortcut">⌘D</span>
</button>
<button class="ctx-menu-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><path d="m16 6-4-4-4 4M12 2v13"/></svg>
<span>Compartir</span>
<span class="ctx-menu-shortcut">⌘⇧S</span>
</button>
<div class="ctx-menu-divider"></div>
<button class="ctx-menu-item ctx-menu-item--danger">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></svg>
<span>Eliminar pedido</span>
<span class="ctx-menu-shortcut">⌫</span>
</button>
{% endcall %}
</div><div style="position:relative;height:280px;width:280px">
<ContextMenu label="Pedido FCT-2026-00184">
<button class="ctx-menu-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4v16h16v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4z"/></svg>
<span>Editar</span>
<span class="ctx-menu-shortcut">⌘E</span>
</button>
<button class="ctx-menu-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
<span>Duplicar</span>
<span class="ctx-menu-shortcut">⌘D</span>
</button>
<button class="ctx-menu-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><path d="m16 6-4-4-4 4M12 2v13"/></svg>
<span>Compartir</span>
<span class="ctx-menu-shortcut">⌘⇧S</span>
</button>
<div class="ctx-menu-divider"></div>
<button class="ctx-menu-item ctx-menu-item--danger">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></svg>
<span>Eliminar pedido</span>
<span class="ctx-menu-shortcut">⌫</span>
</button>
</ContextMenu>
</div>Install the Jinja addon and import the component:
pip install outfitkitThen in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}Or with JinjaX:
<Component ... />Con divider — separador entre grupos
Vista
<div style="position:relative;height:180px;width:240px">
<div class="ctx-menu">
<div class="label">Vista</div>
<button class="ctx-menu-item"><span>Ampliar</span></button>
<button class="ctx-menu-item"><span>Reducir</span></button>
<div class="ctx-menu-divider"></div>
<div class="context-menu-divider" hidden></div>
<button class="ctx-menu-item"><span>Restaurar 100%</span></button>
</div>
</div>{% from "context-menu.jinja" import context_menu %}
<div style="position:relative;height:180px;width:240px">
{% call context_menu(label="Vista") %}
<button class="ctx-menu-item"><span>Ampliar</span></button>
<button class="ctx-menu-item"><span>Reducir</span></button>
<div class="ctx-menu-divider"></div>
<button class="ctx-menu-item"><span>Restaurar 100%</span></button>
{% endcall %}
</div><div style="position:relative;height:180px;width:240px">
<ContextMenu label="Vista">
<button class="ctx-menu-item"><span>Ampliar</span></button>
<button class="ctx-menu-item"><span>Reducir</span></button>
<div class="context-menu-divider"></div>
<button class="ctx-menu-item"><span>Restaurar 100%</span></button>
</ContextMenu>
</div>Install the Jinja addon and import the component:
pip install outfitkitThen in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}Or with JinjaX:
<Component ... />API
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
label | str|None | None | Etiqueta superior opcional. |
attrs | dict | {} | Atributos HTML extra (e.g. style con left/top). |
| (slot) | — | — | Items .ok-ctx-menu-item y __divider. |