Search
Input de búsqueda con icono de lupa y botón de limpiar (o atajo de teclado).
<div class="search">
<span class="icon">
<iconify-icon icon="lucide:search" width="16" height="16"></iconify-icon>
</span>
<input type="search"
class="input"
name="q"
placeholder="Buscar productos, SKU, cliente…"
value=""/>
<button type="button" class="search-clear" aria-label="Limpiar">×</button>
</div>
{% from "searchbar.jinja" import searchbar %}
{{ searchbar(placeholder="Buscar productos, SKU, cliente…") }}
<Searchbarplaceholder="Buscar productos, SKU, cliente…" />
Install the Jinja addon and import the component:
pip install outfitkit
Then in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}
Or with JinjaX:
<Component ... />
<div class="search">
<span class="icon">
<iconify-icon icon="lucide:search" width="16" height="16"></iconify-icon>
</span>
<input type="search"
class="input"
name="q"
placeholder="Buscar…"
value="marmelada"/>
<button type="button" class="search-clear" aria-label="Limpiar">×</button>
</div>
{% from "searchbar.jinja" import searchbar %}
{{ searchbar(placeholder="Buscar…", value="marmelada") }}
<Searchbarplaceholder="Buscar…" value="marmelada" />
Install the Jinja addon and import the component:
pip install outfitkit
Then in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}
Or with JinjaX:
<Component ... />
<div class="search">
<span class="icon">
<iconify-icon icon="lucide:search" width="16" height="16"></iconify-icon>
</span>
<input type="search"
class="input"
name="q"
placeholder="Buscar global…"
value=""/>
<kbd class="search-kbd">⌘K</kbd>
</div>
{% from "searchbar.jinja" import searchbar %}
{{ searchbar(placeholder="Buscar global…", clearable=False, kbd="⌘K") }}
<Searchbarplaceholder="Buscar global…" kbd="⌘K" />
Install the Jinja addon and import the component:
pip install outfitkit
Then in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}
Or with JinjaX:
<Component ... />
<div class="search">
<span class="icon">
<iconify-icon icon="lucide:search" width="16" height="16"></iconify-icon>
</span>
<input type="search"
class="input sm"
name="q"
placeholder="Pequeño"
value=""/>
<button type="button" class="search-clear" aria-label="Limpiar">×</button>
</div>
<div class="search">
<span class="icon">
<iconify-icon icon="lucide:search" width="16" height="16"></iconify-icon>
</span>
<input type="search"
class="input"
name="q"
placeholder="Mediano (default)"
value=""/>
<button type="button" class="search-clear" aria-label="Limpiar">×</button>
</div>
<div class="search">
<span class="icon">
<iconify-icon icon="lucide:search" width="16" height="16"></iconify-icon>
</span>
<input type="search"
class="input lg"
name="q"
placeholder="Grande"
value=""/>
<button type="button" class="search-clear" aria-label="Limpiar">×</button>
</div>
{% from "searchbar.jinja" import searchbar %}
{{ searchbar(placeholder="Pequeño", size="sm") }}
{{ searchbar(placeholder="Mediano (default)") }}
{{ searchbar(placeholder="Grande", size="lg") }}
<Searchbarplaceholder="Pequeño" size="sm" />
<Searchbarplaceholder="Mediano (default)" />
<Searchbarplaceholder="Grande" size="lg" />
Install the Jinja addon and import the component:
pip install outfitkit
Then in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}
Or with JinjaX:
<Component ... />
<div data-signals="{ q: '' }">
<div class="search">
<span class="search-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg></span>
<input class="input" type="search" placeholder="Filtrar pedidos…" data-bind:q/>
<button type="button" class="search-clear" data-show="$q.length > 0" data-on:click="$q = ''">×</button>
</div>
<p style="margin-top:10px;font-size:13px;color:var(--ink-3);">
Filtro: <code data-text="$q || '(vacío)'"></code>
</p>
</div>
<div data-signals="{ q: '' }">
<div class="search">
<span class="search-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg></span>
<input class="input" type="search" placeholder="Filtrar pedidos…" data-bind:q/>
<button type="button" class="search-clear" data-show="$q.length > 0" data-on:click="$q = ''">×</button>
</div>
<p style="margin-top:10px;font-size:13px;color:var(--ink-3);">
Filtro: <code data-text="$q || '(vacío)'"></code>
</p>
</div>
<div data-signals="{ q: '' }">
<div class="search">
<span class="search-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg></span>
<input class="input" type="search" placeholder="Filtrar pedidos…" data-bind:q/>
<button type="button" class="search-clear" data-show="$q.length > 0" data-on:click="$q = ''">×</button>
</div>
<p style="margin-top:10px;font-size:13px;color:var(--ink-3);">
Filtro: <code data-text="$q || '(vacío)'"></code>
</p>
</div>
Install the Jinja addon and import the component:
pip install outfitkit
Then in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}
Or with JinjaX:
<Component ... />
API
| Prop | Tipo | Default | Descripción |
|---|
placeholder | str | "Buscar…" | Texto del placeholder. |
name | str | "q" | Atributo name del input. |
value | str | "" | Valor inicial. |
clearable | bool | true | Muestra botón ×. Ignorado si kbd está presente. |
kbd | str | "" | Hint de atajo (ej. "⌘K") en lugar del botón limpiar. |
size | str | None | sm · lg. |
attrs | dict | None | Atributos extra. |