Action Sheet — OutfitKit

Action Sheet

Hoja inferior con lista de acciones — patrón iOS / Ionic. Slide-up en móvil, modal centrado con max-width en desktop. Backdrop con blur, handle de arrastre, acción destructiva en rojo, botón "Cancelar" separado del grupo.

Nota: los ejemplos siguientes son markup estático con state="open" para mostrar la pieza. Para abrir/cerrar reactivo, mira el ejemplo final con Datastar ($open).

Básico · 3 acciones + cancel

<div style="position:relative; min-height:480px;">
  <div class="action-sheet-root" data-state="open">
  <div class="backdrop"></div>
  <div class="action-sheet" role="dialog" aria-modal="true" aria-labelledby="action-sheet-title">
    <div class="action-sheet-handle" aria-hidden="true"></div>
    
    <header class="action-sheet-head">
      <h3 class="action-sheet-title" id="action-sheet-title">Compartir publicación</h3>
      <p class="action-sheet-sub">Elige cómo quieres compartir esto</p>
    </header>
    
    <div class="action-sheet-actions">
      
    <button class="action-sheet-action">Copiar enlace</button>
    <button class="action-sheet-action">Enviar por mensaje</button>
    <button class="action-sheet-action">Compartir en redes</button>
  
    </div>
    
    <div class="action-sheet-cancel-wrap">
      <button type="button" class="action-sheet-cancel" data-on:click="$open = false">Cancelar</button>
    </div>
    
  </div>
</div>
</div>

{% from "action-sheet.jinja" import action_sheet %}
<div style="position:relative; min-height:480px;">
  {% call action_sheet(title="Compartir publicación", subtitle="Elige cómo quieres compartir esto", state="open") %}
    <button class="action-sheet-action">Copiar enlace</button>
    <button class="action-sheet-action">Enviar por mensaje</button>
    <button class="action-sheet-action">Compartir en redes</button>
  {% endcall %}
</div>

<div style="position:relative; min-height:480px;">
  <ActionSheet title="Compartir publicación" subtitle="Elige cómo quieres compartir esto" state="open">
    <button class="action-sheet-action">Copiar enlace</button>
    <button class="action-sheet-action">Enviar por mensaje</button>
    <button class="action-sheet-action">Compartir en redes</button>
  </ActionSheet>
</div>

Install the Jinja addon and import the component:

pip install outfitkit

Then in your template:

{% from "&lt;component&gt;.jinja" import &lt;component&gt; %}
{{ &lt;component&gt;(...) }}

Or with JinjaX:

<Component ... />

Con acción destructiva

<div style="position:relative; min-height:480px;">
  <div class="action-sheet-root" data-state="open">
  <div class="backdrop"></div>
  <div class="action-sheet" role="dialog" aria-modal="true" aria-labelledby="action-sheet-title">
    <div class="action-sheet-handle" aria-hidden="true"></div>
    
    <header class="action-sheet-head">
      <h3 class="action-sheet-title" id="action-sheet-title">¿Eliminar este pedido?</h3>
      <p class="action-sheet-sub">Esta acción no se puede deshacer</p>
    </header>
    
    <div class="action-sheet-actions">
      
    <button class="action-sheet-action destructive">Eliminar pedido</button>
    <button class="action-sheet-action">Archivar en su lugar</button>
  
    </div>
    
    <div class="action-sheet-cancel-wrap">
      <button type="button" class="action-sheet-cancel" data-on:click="$open = false">Cancelar</button>
    </div>
    
  </div>
</div>
</div>

<div style="position:relative; min-height:480px;">
  {% call action_sheet(title="¿Eliminar este pedido?", subtitle="Esta acción no se puede deshacer", state="open") %}
    <button class="action-sheet-action destructive">Eliminar pedido</button>
    <button class="action-sheet-action">Archivar en su lugar</button>
  {% endcall %}
</div>

<div style="position:relative; min-height:480px;">
  {% call action_sheet(title="¿Eliminar este pedido?", subtitle="Esta acción no se puede deshacer", state="open") %}
    <button class="action-sheet-action destructive">Eliminar pedido</button>
    <button class="action-sheet-action">Archivar en su lugar</button>
  {% endcall %}
</div>

Install the Jinja addon and import the component:

pip install outfitkit

Then in your template:

{% from "&lt;component&gt;.jinja" import &lt;component&gt; %}
{{ &lt;component&gt;(...) }}

Or with JinjaX:

<Component ... />

Sin head, sin cancel, con acción primary + disabled

<div style="position:relative; min-height:480px;">
  <div class="action-sheet-root" data-state="open">
  <div class="backdrop"></div>
  <div class="action-sheet" role="dialog" aria-modal="true">
    <div class="action-sheet-handle" aria-hidden="true"></div>
    
    <div class="action-sheet-actions">
      
    <button class="action-sheet-action primary">Confirmar pago · 24,90 €</button>
    <button class="action-sheet-action">Aplicar cupón</button>
    <button class="action-sheet-action">Editar dirección</button>
    <button class="action-sheet-action" disabled>Pago aplazado (no disponible)</button>
  
    </div>
    
  </div>
</div>
</div>

<div style="position:relative; min-height:480px;">
  {% call action_sheet(state="open", cancel_label="") %}
    <button class="action-sheet-action primary">Confirmar pago · 24,90 €</button>
    <button class="action-sheet-action">Aplicar cupón</button>
    <button class="action-sheet-action">Editar dirección</button>
    <button class="action-sheet-action" disabled>Pago aplazado (no disponible)</button>
  {% endcall %}
</div>

<div style="position:relative; min-height:480px;">
  {% call action_sheet(state="open", cancel_label="") %}
    <button class="action-sheet-action primary">Confirmar pago · 24,90 €</button>
    <button class="action-sheet-action">Aplicar cupón</button>
    <button class="action-sheet-action">Editar dirección</button>
    <button class="action-sheet-action" disabled>Pago aplazado (no disponible)</button>
  {% endcall %}
</div>

Install the Jinja addon and import the component:

pip install outfitkit

Then in your template:

{% from "&lt;component&gt;.jinja" import &lt;component&gt; %}
{{ &lt;component&gt;(...) }}

Or with JinjaX:

<Component ... />

Reactivo con Datastar

<div data-signals-open="false" style="position:relative; min-height:480px;">
  <button class="btn primary" data-on:click="$open = true">Abrir hoja</button>
  <div class="action-sheet-root" data-state="closed" data-attr:data-state="$open ? 'open' : 'closed'">
  <div class="backdrop"></div>
  <div class="action-sheet" role="dialog" aria-modal="true" aria-labelledby="action-sheet-title">
    <div class="action-sheet-handle" aria-hidden="true"></div>
    
    <header class="action-sheet-head">
      <h3 class="action-sheet-title" id="action-sheet-title">Acciones</h3>
      
    </header>
    
    <div class="action-sheet-actions">
      
    <button class="action-sheet-action" data-on:click="$open = false">Acción 1</button>
    <button class="action-sheet-action" data-on:click="$open = false">Acción 2</button>
    <button class="action-sheet-action destructive" data-on:click="$open = false">Eliminar</button>
  
    </div>
    
    <div class="action-sheet-cancel-wrap">
      <button type="button" class="action-sheet-cancel" data-on:click="$open = false">Cancelar</button>
    </div>
    
  </div>
</div>
</div>

{# Reactivo con Datastar — usa $open en signals del scope. #}
<div data-signals-open="false" style="position:relative; min-height:480px;">
  <button class="btn primary" data-on:click="$open = true">Abrir hoja</button>
  {% call action_sheet(title="Acciones", state="closed",
                        attrs={"data-attr:data-state": "$open ? 'open' : 'closed'"}) %}
    <button class="action-sheet-action" data-on:click="$open = false">Acción 1</button>
    <button class="action-sheet-action" data-on:click="$open = false">Acción 2</button>
    <button class="action-sheet-action destructive" data-on:click="$open = false">Eliminar</button>
  {% endcall %}
  {# Click en backdrop cierra. #}
  <script>
    document.currentScript.previousElementSibling.querySelector('.backdrop')
      ?.addEventListener('click', () => { window.ds?.signals?.open?.set?.(false); });
  </script>
</div>

{# Reactivo con Datastar — usa $open en signals del scope. #}
<div data-signals-open="false" style="position:relative; min-height:480px;">
  <button class="btn primary" data-on:click="$open = true">Abrir hoja</button>
  {% call action_sheet(title="Acciones", state="closed",
                        attrs={"data-attr:data-state": "$open ? 'open' : 'closed'"}) %}
    <button class="action-sheet-action" data-on:click="$open = false">Acción 1</button>
    <button class="action-sheet-action" data-on:click="$open = false">Acción 2</button>
    <button class="action-sheet-action destructive" data-on:click="$open = false">Eliminar</button>
  {% endcall %}
  {# Click en backdrop cierra. #}
  <script>
    document.currentScript.previousElementSibling.querySelector('.backdrop')
      ?.addEventListener('click', () => { window.ds?.signals?.open?.set?.(false); });
  </script>
</div>

Install the Jinja addon and import the component:

pip install outfitkit

Then in your template:

{% from "&lt;component&gt;.jinja" import &lt;component&gt; %}
{{ &lt;component&gt;(...) }}

Or with JinjaX:

<Component ... />

API

Prop	Tipo	Default	Descripción
`title`	str	`""`	Título opcional (omite el header si vacío y subtitle también).
`subtitle`	str	`""`	Subtítulo opcional bajo el título.
`state`	`"open"` \| `"closed"`	`"closed"`	Estado de visibilidad. Anímalo desde Datastar con `data-attr:data-state`.
`show_handle`	bool	`true`	Pinta el handle de arrastre (solo se ve en móvil).
`cancel_label`	str	`"Cancelar"`	Texto del botón cancelar; `""` lo oculta.
(slot)	—	—	Lista de `<button class="action-sheet-action">`. Modificadores: `.destructive` (rojo), `.primary` (resaltada), `disabled`.