search

bblanchon / django-htmx-messages-framework

Django+HTMX: integration with the messages framework
https://blog.benoitblanchon.fr/django-htmx-messages-framework/
MIT License
51 stars 11 forks source link

Toast styling #10

Closed ericmuijs closed 2 months ago

ericmuijs commented 2 months ago

Hi Benoit, I dont see the toast styling, I added the following to my code:


<!-- Toasts HTMX -->
<div class="toast-container position-fixed top-0 end-0 p-3" id="toasts" hx-swap-oob="afterbegin" >
  {% for message in messages %}
  <div class="toast align-items-center 
    {% if "error" in message.tags %}text-bg-danger
    {% elif "warning" in message.tags %}text-bg-warning
    {% elif "success" in message.tags %}text-bg-success
    {% elif "info" in message.tags %}text-bg-primary
    {% else %}text-bg-primary
    {% endif %} border-0" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="d-flex">
      <div class="toast-body">
        {{ message.message }}
      </div>
      <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
  </div>
  {% endfor %}

</div>
bblanchon commented 2 months ago

Hi @ericmuijs,

The styling is done by adding {{ message.tags }} to the toast's classes: https://github.com/bblanchon/django-htmx-messages-framework/blob/ca936b2375820e1da28a867a86d4c150a055c2e9/htmx_messages/templates/toasts.html#L3

Of course, this only works if you configured the mapping between error levels and tags: https://github.com/bblanchon/django-htmx-messages-framework/blob/ca936b2375820e1da28a867a86d4c150a055c2e9/demoproject/settings.py#L134-L140

See MESSAGE_TAGS documentation

Best regards, Benoit