Saltar a contenido

Atributos extra#

Si le pasas atributos no declarados a un componentes, estos no son descartados si no, en cambio, recogidos en un objeto attrs que puede renderizar estos atributos extra llamando a attrs.render()

Por ejemplo, este componente:

components/Card.jinja
{# title = ... #}
<div {{ attrs.render() }}>
  <h1>{{ title }}</h1>
  {{ content }}
</div>

usado como:

<Card title="Products" class="bg-blue-500 mb-10" open>
bla
</Card>

será renderizado a:

<div class="bg-blue-500 mb-10" open>
  <h1>Products</h1>
  bla
</div>

Puedes agregar o quitar atributos, antes de renderizarlos, usando los otros métodos del objeto attrs. Por ejemplo:

{# title = ... #}
{% do attrs.add_class("card") -%}

<div {{ attrs.render() }}>
  <h1>{{ title }}</h1>
  {{ content }}
</div>

Métodos de attrs#

.add(name, value=True)#

Agrega un atributo (ej. type="text") o activa una propiedad (ej. disabled). Usa un nombre y un valor para agregar un atributo, u omite el valor o usa True como valor para activar una propiedad.

{% do attrs.add("disabled") %}
{% do attrs.add("readonly", True) %}
{% do attrs.add("data-test", "foobar") %}
{% do attrs.add("id", 3) %}

.remove(name)#

Elimina un atributo o propiedad.

{% if active -%}
{% do attrs.remove("disabled") %}
{%- endif %}

.add_class(name) / .add_classes(name1, name2, ...)#

Agrega una o más clases a la lista de clases.

{% do attrs.add_class("card") %}
{% do attrs.add_classes("active", "animated", "bright") %}
{% do attrs.add_classes("active animated bright") %}

.remove_class(name) / .remove_classes(name1, name2, ...)#

Elimina una o más clases de la lista de clases.

{% do attrs.remove_class("hidden") %}
{% do attrs.remove_classes("active", "animated") %}

.setdefault(name, value)#

Agrega un atributo (ej. type="text"), pero solo si no está ya presente.

{% do attrs.setdefault("aria-label", "Products") %}

.update(dd=None, **kw)#

Actualiza varios atributos o propiedades al mismo tiempo.

{%- do attrs.update(
    role="tab",
    aria_selected="true" if active else "false",
    aria_controls=target,
    tabindex="0" if active else "-1",
) -%}

Los guiones bajos en los nombres serán reemplazados automáticamente por guiones, así que aria_selected se volverá el atributo aria-selected.

.get(name, default=None)#

Devuelve el valor del atributo, o el valor de default si el atributo no existe.

{%- set role = attrs.get("role", "tab")

.render()#

Renderiza los atributos y propiedades como un texto. Para dar un resultado consistente, los atributos y propiedades se ordenan alfabéticamente por nombre y renderizados así: <attributor ordenados> + <propiedades ordenadas>.

<button {{ attrs.render() }}>
  {{ content }}
</button>

Cuidado

Usar {{ attrs.render() }} como un atributo en otros componentes no funcionará, porque los componentes se convierten a macros antes que renderizar la página.

Si necesitas que funcione, debes usar el atributo especial __attrs.

{#--- MUY MAL 😵 ---#}
<MyButton {{ attrs.render() }} />

{#--- BIEN 👍 ---#}
<MyButton __attrs={ attrs } />

Otra opción es definir explícitamente que atributos necesitan los sub-componentes:

{#
btn_class = ''
-#}
<MyButton class={btn_class} />
Volver al principio