Theme
Version
GitHubPyPIDiscord
On this page

v0.152.0

Feature

  • New tag {% attrs %}, more powerful alternative to {% html_attrs %}

    The new {% attrs %} tag accepts dicts, optionally lists or nested lists of dicts.

    {% attrs some_dict {"data-extra": 123} %}
    

    Merging: Old {% html_attrs %} merged all attributes. {% attrs %} merges only class and style. For other attributes, the last one wins. This is now aligned with Vue's behavior.

    class and style still accept strings, dicts, and lists:

    {% attrs {
        "class": ["rounded", {"shadow": True}],
        "style": ["color: red;", {"color": "blue"}],
    } %}
    

    Rendered directly, the result is an escaped, space-delimited HTML attribute string:

    <div {% attrs {"id": "1"} {"data-extra": 123} %}></div>
    
    <div id="1" data-extra="123"></div>
    

    When {% attrs %} is the only tag in component's input, the component receives the dictionary without serialization:

    {% component "table"
        table_attrs="{% attrs [base_attrs, {'class': 'compact'}] %}"
    / %}
    

    Use the compose_attrs() helper in Python.

    The existing {% html_attrs %} tag and merge_attributes() helper keep their old behavior.

    format_attributes() and the new attrs tag now reject invalid runtime HTML attribute names.

    See #1703.

django-components version: 0.152.0