{% extends "base.html" %} {% from 'component_library.html' import clickable_button %} {% from 'component_library.html' import writable_input %} {% block title %} - Dynamic Elements{% endblock %} {% block head_bottom %} {% endblock %} {% block body %}

Dynamic Elements


Hidden elements

{{ clickable_button('button-one', attrs=[('style','display: none')]) }}
{{ writable_input('input-one', attrs=[('style','display: none')]) }}

To Be Hidden

{{ clickable_button('button-two') }}
{{ writable_input('input-two') }}

Disabled Elements

{{ clickable_button('button-three', attrs=[('disabled','')]) }}
{{ writable_input('input-three', attrs=[('disabled','')]) }}

To Be Disabled

{{ clickable_button('button-four') }}
{{ writable_input('input-four') }}

Not Present


To Be Removed

{{ clickable_button('button-six') }}
{{ writable_input('input-six') }}

Text changes

{{ clickable_button('button-seven', text='Initial Text') }}

Value changes

{{ writable_input('input-seven', attrs=[('value', 'initial value')]) }}

Add attribute

Attribute verified is added.

{{ clickable_button('button-height') }}

Remove attribute

Attribute verified is removed.

{{ clickable_button('button-nine', attrs=[('verified', 'true')]) }}

Change Title

change page title after delay.

{% endblock %} {% block body_bottom %} {% endblock %}